Плавающий DIV идти ниже партнера

Рассмотрим следующую HTML структуру,Плавающий DIV идти ниже партнера

<div class='floated' id='div1'></div> 
<div class='floated' id='div2'></div> 
<div class='floated' id='div3'></div>

со следующим CSS:

.floated { 
    width: 50%; 
    float: left; 
} 

#div1 { 
    height: 300px; 
    background-color:red; 
} 

#div2 { 
    height: 30px; 
    background-color: green; 
} 

#div3 { 
    height: 30px; 
    background-color: yellow; 
}

Таким образом, #div1 будет занять 300px высокую часть с левой стороны страницу, в то время как #div2 и #div3 будут размещены в правой части страницы. Как я мог настроить свой CSS, поэтому #div1 и #div2 занимает один ряд (высотой 300 пикселей, максимальная высота двух) и #div3 будет размещен прямо под номером #div1?

Я не контролирую высоту этих div, это динамично, возможно, что иногда первый из них будет всего 20 пикселей, а второй будет 1000 пикселей, а наоборот - также возможность

Вот скрипка: https://jsfiddle.net/1u55fukj/

источник

2016-11-04 Adam Baranyai

Не можете ли вы перенести первые два div на новый? 'div 'не является семантическим, так что вы можете использовать дополнительный' div', чтобы сделать вашу жизнь проще, предполагая, что у вас есть доступ к HTML. – tmslnz

Вы можете использовать Flexbox на родительский элемент (body в данном случае) и использовать flex-wrap: wrap. Это всегда будет делать оба div «S в той же строке, равной высоте или равна высоте повыше DEMO

body { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.floated { 
 
    flex: 0 0 50%; 
 
} 
 
#div1 { 
 
    height: 300px; 
 
    background-color: red; 
 
} 
 
#div2 { 
 
    background-color: green; 
 
} 
 
#div3 { 
 
    height: 30px; 
 
    background-color: yellow; 
 
}

<div class='floated' id='div1'></div> 
 
<div class='floated' id='div2'></div> 
 
<div class='floated' id='div3'></div>

источник

2016-11-04 13:29:55

Упрощенный, это фактически решает проблему, и если не будет другого решения, которое более совместимо с большим количеством браузеров, оно примет его через несколько часов!Благодаря! –

Добро пожаловать. –

Разве это так, как Bootstrap делает его отзывчивым макетом дизайна? –

Если будут только 2 див в строке, то вы можете попробовать дать clear:left к odd child.

.floated { 
 
    width: 50%; 
 
    float: left; 
 
} 
 
#div1 { 
 
    height: 300px; 
 
    background-color: red; 
 
} 
 
#div2 { 
 
    height: 30px; 
 
    background-color: green; 
 
} 
 
#div3 { 
 
    height: 30px; 
 
    background-color: yellow; 
 
} 
 
div.floated:nth-child(odd) { 
 
    clear: left 
 
}

<div class='floated' id='div1'> 
 

 
</div> 
 
<div class='floated' id='div2'> 
 

 
</div> 
 
<div class='floated' id='div3'> 
 

 
</div>

источник

2016-11-04 13:29:06

Это хороший обходной путь, но я бы предпочел универсальный код, который поддерживает больше divs в одной строке. –

Вот почему я упомянул ** Если в строке будет только 2 divs ** Тогда это сработает. :) –

Итак, вы пытаетесь, чтобы элемент _last_ опустился ниже любого предыдущего брата, независимо от того, сколько из них раньше? свойство 'last-child' и' clear' должно сделать это. – tmslnz

Flexbox это лучший выбор я думаю.

вы могли бы использовать Div контейнер, а затем использовать дисплей прогибается

.container{ 
 
    height: 500px; 
 
    width: 100%; 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    justify-content: center; 
 
} 
 
.floated { 
 
    width: 50%; 
 
} 
 

 
#div1 { 
 
    height: 30%; 
 
    background-color:red; 
 
} 
 

 
#div2 { 
 
    height: 60%; 
 
    background-color: green; 
 
} 
 

 
#div3 { 
 
    height: 40%; 
 
    background-color: yellow; 
 
}

<div class="container"> 
 
    <div class="floated" id="div1"></div> 
 
    <div class="floated" id="div2"></div> 
 
    <div class="floated" id="div3"></div> 
 
</div>

вы также можете отцентрировать третий ДИВ и намного больше: D. У Flexbox есть хорошая поддержка скремблирования с использованием -moz-, -webkit- и т. Д.,

источник

2016-11-04 14:00:44

Плавающий DIV идти ниже партнера

ответ

Смежные вопросы