Ответ 1
Вы не можете сделать это напрямую, потому что floats выровнены вверху:
Если есть строка строки, внешняя вершина плавающего поля выравнивается с верхней частью текущей строки строки.
Точный rules говорит (акцент мой):
- Плавающий ящик внешний верх может быть не выше верхнего уровня содержащий блок.
- внешний верх плавающей коробки не может быть выше внешней вершины любого block или floated поле, сгенерированное элемент ранее в исходном документе.
- внешний верх элемента с плавающей запятой может быть не выше верхнего line-box, содержащий поле, сгенерированное элемент ранее в исходном документе.
- Плавающий ящик должен быть размещен как можно выше.
Тем не менее, вы можете воспользоваться правилом № 4:
- Поместите каждый поплавок внутри встроенных элементов, которые устанавливают новый контекст форматирования блоков/BFC), например
display: inline-block. - Эти оболочки будут содержать поплавки, потому что они устанавливают BFC и будут рядом друг с другом, поскольку они являются встроенными.
- Используйте
vertical-align, чтобы выровнять эту оболочку по вертикали.
Помните, что между обтекателями встроенного блока может появляться некоторое пространство. См. Как удалить пространство между элементами встроенного блока?, чтобы исправить его.
.float-left {
float: left;
}
.float-right {
float: right;
}
#main {
border: 1px solid blue;
margin: 0 auto;
width: 500px;
}
/* Float wrappers */
#main > div {
display: inline-block;
vertical-align: middle;
width: 50%;
}<div id="main">
<div>
<div class="float-left">
<p>AAA</p>
</div>
</div>
<div>
<div class="float-right">
<p>BBB</p>
<p>BBB</p>
</div>
</div>
</div>