3 divs with float: left> floating issues

Question

Как я могу отобразить данную структуру html, пока все divs имеют float: left?

<div id="d1"></div> 
<div id="d2"></div> 
<div id="d3"></div> 

Answer 1

Вот как я это сделал.

div { 
 
    margin: 10px; 
 
    overflow: auto; 
 
    display: inline; 
 
    clear: none; 
 
    float: left; 
 
} 
 
#container { 
 
    max-width: 390px; 
 
    display: block; 
 
} 
 
#d1 { 
 
    background: red; 
 
    width: 200px; 
 
    height: 100px; 
 
} 
 
#d2 { 
 
    background: blue; 
 
    width: 150px; 
 
    height: 150px; 
 
    float: right; 
 
} 
 
#d3 { 
 
    background: green; 
 
    width: 200px; 
 
    height: 150px; 
 
}

<div id="container"> 
 
    <div id="d1"></div> 
 
    <div id="d2"></div> 
 
    <div id="d3"></div> 
 
</div>

Просто нужен второй элемент, который будет плавали прямо в контейнере DIV.

Answer 2

Вы кладете контейнер DIV вокруг сНа один и три

#container 
 
{ 
 
    width:80%; 
 
    float:left; 
 
} 
 
#three 
 
{ 
 
    width:20%; 
 
    float:left; 
 
    background-color:blue; 
 
    height:600px; 
 
} 
 
#one, #two 
 
{ 
 
    background-color:green; 
 
    margin:10px 10px; 
 
    height:300px; 
 
}

<div id="container"> 
 
    <div id="one">1</div> 
 
    <div id="two">2</div> 
 
</div> 
 
<div id="three">3</div>

Answer 3

Я сожалею, что этот ответ является расплывчатым, но это только так расплывчато ваш вопрос. Пример того, как это может быть сделано ниже:

#container { 
 
    float: left; 
 
} 
 
#d1 { 
 
    width: 200px; 
 
    height: 100px; 
 
    background: blue; 
 
} 
 
#d2 { 
 
    width: 200px; 
 
    height: 100px; 
 
    background: green; 
 
} 
 
#d3 { 
 
    width: 100px; 
 
    height: 200px; 
 
    background: red; 
 
    float: left; 
 
}

<div id="container"> 
 
    <div id="d1"></div> 
 
    <div id="d2"></div> 
 
</div> 
 
<div id="d3"></div>

Я надеюсь, что вы получите вдохновение. , ,