3 div with float：left>浮動問題

-2

如何顯示給定的html結構，而所有div都浮動：left？3 div with float：left>浮動問題

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

div layout

來源

2014-11-20 Kristo

需要'float：right'在第二個http://jsfiddle.net/metq1sh5/ – DaniP 2014-11-20 17:06:49

你是否搜索簡單的解決方案進行純填充？ – 2014-11-20 17:10:39

http://stackoverflow.com/questions/24117376/floating-divs-with-different-height-fill-empty-space – 2014-11-20 17:12:17

這就是我做到的。

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右被浮置。

來源

2014-11-20 17:12:42 Stewartside

你能否將這個解決方案擴展到7個不同高度？ – 2014-11-20 17:15:00

我不太確定我的頭頂，試試看看它是如何工作並影響顯示。將上面的代碼複製到codepen中，看看它是如何發生的。 – Stewartside 2014-11-20 17:16:01

7只是一個數字..我只是想，是否有任何純粹的CSS解決方案填補任何（dinamic多變）數量的差異屏幕...而這是另一個問題:) – 2014-11-20 17:21:32

你把一個div容器周圍的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>

來源

2014-11-20 17:04:58

這只是創建3個堆疊在列中的div，而不是指定的格式。 CSS甚至不影響divs。 – Grice 2014-11-20 17:08:23

正在製作一個代碼示例，秒。 Wil編輯 – 2014-11-20 17:11:16

對不起這個答案是模糊的，但它只是作爲那樣的模糊你的問題。怎麼可以這樣做下面是一個例子：

#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>

我希望你能得到一些啓示。。。

來源

2014-11-20 17:10:21

3 div with float：left>浮動問題

回答

相關問題