Не получить правильное положение div по требованию в html

Question

Имея дело с html-кодом в одном из моих проектов, я столкнулся с одной проблемой, в которой я взял один основной div в качестве контейнера, внутри которого я взял один суб-div в левое положение, второе в правом положении и третье, следующее в следующей строке. До сих пор мой код работает очень отлично, как вы можете видеть в моем коде. Но я хочу, чтобы мой третий div был ровным дном моего первого div, высота которого меньше моего второго div. Итак, я просто хочу знать, что это их любое другое свойство в html или css, за исключением использования свойства margin-top в моем третьем div, благодаря чему я могу сделать это возможным. Чтобы сделать это более ясным, я привел один пример ниже.

Я буду более счастлив, если кто-нибудь даже побеспокоит мой вопрос и предложит мне что-нибудь. Спасибо заранее.

<div style="width:500px;"> 
 
     <div style="width:150px;height:50px;background-color:black;float:left; color:white;"> 
 
     1st div 
 
     </div> 
 
    
 
     <div style="width:100px;height:100px;background-color:#0CF;float:right;"> 
 
     2nd div 
 
     </div> 
 
    <div style="clear:both"></div> 
 
    <div style="width:50px;height:50px;background-color:#F00;float:left;"> 
 
    3rd div 
 
    </div> 
 
</div>

Answer 1

Вы должны начать с удалением <div> с clear:both; - это подталкивает ваш третий div под двумя другими.

Затем добавьте clear:left; в третий отдел. Это заставляет его очищать все элементы, оставленные слева, при этом игнорируются те, которые плавают вправо.

<div style="width:500px;"> 
    <div style="width:150px;height:50px;background-color:black;float:left; color:white;"> 
    1st div 
    </div> 

    <div style="width:100px;height:100px;background-color:#0CF;float:right;"> 
    2nd div 
    </div> 
<div style="width:50px;height:50px;background-color:#F00;float:left;clear:left;"> 
3rd div 
</div> 

См JSFiddle

Вы также можете посмотреть на this question on SO, которая охватывает float И clear более подробно.

Answer 2

Я не совсем уверен, что вы хотите точно, но это то, что я понял его.

Попробуйте запустить этот фрагмент:

<div style="width:500px;"> 
 
     <div style="width:150px;height:50px;background-color:black;float:left; color:white;"> 
 
     1st div 
 
     </div> 
 
    
 
     <div style="width:100px;height:100px;background-color:#0CF;float:right;"> 
 
     2nd div 
 
     </div> 
 
    <div style="clear:both"></div> 
 
    <div style="width:50px;height:50px;background-color:#F00;float:left;position:relative;top:-40px;"> 
 
    3rd div 
 
    </div> 
 
</div>

Я просто добавил позицию: относительный; верх: -40px;

Это -40 px означает, что он перемещается на 40 пикселей в направлении «сверху». Это заставляет этот объект подняться. Но если вы набрали в там 40px вместо -40 будет идти 40 пикселей от «сверху», что делает его идти вниз :)

Надеется, что это помогает :)