Поплавок две дивы слева и один правый

Question

Моя структура кода выглядит следующим образом

<div style="height: 100px; 
 
      Width: 200px;"> <!-- Container --> 
 
    <div style="float: left; 
 
       height: 50px; 
 
       Width: 100px; 
 
       background-color: red;"> 
 
    </div> 
 
    <div style="float: left; 
 
       height: 50px; 
 
       Width: 100px; 
 
       background-color: blue;"> 
 
    </div> 
 
    <div style="float: right; 
 
       height: 50px; 
 
       Width: 100px; 
 
       background-color: green;"> 
 
    </div> 
 
</div>

Но правильное положение элементов должно выглядеть следующим образом:

┌──────┬──────┐ 
│ red │green │ 
├──────┼──────┘ 
│ blue │ 
└──────┘ 

Я не могу изменить или добавить дополнительный код, единственный способ - с помощью CSS. Как я должен поплавать в div, чтобы быть в правильном порядке, как я упоминал выше?

Редактировать: Мой код не содержит и не может содержать div с четким.

Answer 1

Ну, это скорее головоломка, а не законный вопрос, но здесь.

При правильном использовании полей и позиций в дополнение к назначению свойства null для очистки можно выполнить свой сценарий.

<div style="height: 100px; Width: 200px;"> 
 
<!-- Container --> 
 
<div style="float:left; height: 50px; Width:100px; background-color:red;"></div> 
 
<div style="float: right; height: 50px; margin-top: 50px;Width:100px; background-color:blue;position: absolute;"></div> 
 
<div style="clear: none;"></div> 
 
<div style=" height: 50px; margin-left: 100px;margin-bottom: 50px;Width:100px; background-color:green;"></div> 
 
</div> 
 
</div>

Answer 2

вам не нужно плавающая для этого. отключите все плавающие, используя !important, чтобы переопределить встроенные стили, а затем используйте :nth-of-type(), чтобы выбрать зеленый div и установить его абсолютно с правом и верхним равными 0;

div { 
 
    position: relative; 
 
} 
 
div > div{ 
 
    float: none !important; 
 
} 
 
div > div:nth-of-type(3) { 
 
    position: absolute; 
 
    right: 0; 
 
    top:0; 
 
}

<div style="height: 100px; Width: 200px;"> 
 
    <!-- Container --> 
 
    <div style="float:left; height: 50px; Width:100px; background-color:red;"> 
 
    </div> 
 
    <div style="float:left; height: 50px; Width:100px; background-color:blue;"> 
 
    </div> 
 
    <div style="float:right; height: 50px; Width:100px; background-color:green;"> 
 
    </div> 
 
</div>

Answer 3

Имея такую ​​же структуру HTML, вы можете выбрать div с в CSS с помощью :nth-child(N). В этом случае вы просто необходимо обновить синий (2) и зеленый (4) коробки, и один с clear:both стиле (3):

div > div:nth-child(2) { 
 
    margin-top: 50px; 
 
} 
 
div > div:nth-child(3) { 
 
    display: none; 
 
} 
 
div > div:nth-child(4) { 
 
    margin-top: -100px; 
 
}

<div style="height: 100px; Width: 200px;"> 
 
    <!-- Container --> 
 
    <div style="float:left; height: 50px; Width:100px; background-color:red;"> 
 
    </div> 
 
    <div style="float:left; height: 50px; Width:100px; background-color:blue;"> 
 
    </div> 
 
    <div style="clear:both;"></div> 
 
    <div style="float:right; height: 50px; Width:100px; background-color:green;"> 
 
    </div> 
 
</div>

Обратите внимание, что это будет работа для этого конкретного примера. Было бы идеально, если бы контейнер div имел идентификатор и использовал его вместо div >.

---

Для более общего решения, которое будет работать независимо от высоты коробки, вы могли бы использовать transform:translate() так:

div > div:nth-child(2) { 
    transform:translate(0%, 100%); 
} 
div > div:nth-child(3) { 
    display:none; 
} 
div > div:nth-child(4) { 
    transform:translate(0%, -100%); 
} 

Как вы можете видеть на этом JSFiddle: http://jsfiddle.net/eekhjv3n/1/

Answer 4

Вы можете использовать clear: left на синем поле, чтобы нажать его, а затем использовать отрицательный запас на зеленом поле, чтобы подтолкнуть его.

<div style="height: 100px; Width: 200px;"> 
 
    <!-- Container --> 
 

 
    <div style="float:left;height: 50px; 
 
        width:100px; background-color:red;"> 
 
    </div> 
 
    <div style="float:left;clear:left; 
 
        height: 50px; Width:100px; background-color:blue;"> 
 
    </div> 
 
    <div style="float:left; height:50px; 
 
        width:100px; background-color:green;margin-top:-50px;"> 
 
    </div> 
 

 
</div>