CSS如何強制容器顯示在元素浮動的前一容器下方

我希望顯示「D」的div出現在顯示「A」的那個下面，以便具有匹配背景色的div顯示堆疊在上面另一個。不過，我得到這個：CSS如何強制容器顯示在元素浮動的前一容器下方

我在CSS代碼到底在哪必須清除我的浮？

#container { 
 
    background-color: #333333; 
 
    width: 990px; 
 
} 
 
#left { 
 
    background-color: red; 
 
    width: 300px; 
 
    float: left; 
 
} 
 
#splitter { 
 
    background-color: green; 
 
    width: 90px; 
 
    float: left; 
 
} 
 
#right { 
 
    background-color: blue; 
 
    width: 200px; 
 
    float: left; 
 
}

<div id="container"> 
 
    <div id="left">A</div> 
 
    <div id="splitter">B</div> 
 
    <div id="right">C</div> 
 
</div> 
 
<div id="container"> 
 
    <div id="left">D</div> 
 
    <div id="splitter">E</div> 
 
    <div id="right">F</div> 
 
</div>

來源

2016-11-19 rvelbon

是否嘗試過顯示：塊 – karthick

我在哪裏插入它？ – rvelbon

我發佈了答案plz檢查它@rvelbon – karthick

<style> 
.container{ 
background-color: #333333; 
width:990px; 
display:block; 
clear:both; 
} 

#left{ 
background-color: red; 
width:300px; 
float:left; 
} 

#splitter{ 
background-color: green; 
width:90px; 
float:left; 
} 

#right{ 
background-color: blue; 
width: 200px; 
float:left; 
} 
</style> 
<body> 
<div class="container"> 
    <div id="left">A</div> 
    <div id="splitter">B</div> 
    <div id="right">C</div> 
</div> 
<div class="container"> 
    <div id="left">D</div> 
    <div id="splitter">E</div> 
    <div id="right">F</div> 
</div> 
</body>

結果是

來源

2016-11-19 14:02:08 karthick

它不起作用。你重寫display：block;顯示：block; （塊元素的默認值） –

我增加了明確：現在代碼工作正常.... – karthick

這個「解決方案」仍然有兩個具有相同的「ID」值的容器。無效的HTML。 – connexo

清除在容器中的浮體。你有3層簡單的方法來做到這一點：

浮動

#container{ 
clear:both; 
}

溢出

#container{ 
overflow:hidden; 
}

或micro clearfix hack

來源

2016-11-19 14:02:24

這不能解決OP代碼中重複的'id'問題。 – connexo

這裏是你想要的東西做起來難的兄弟.. 這一項是使用display:inline-blockhttps://jsfiddle.net/p4domjrb/ 這一個是通過使用float:lefthttps://jsfiddle.net/p4domjrb/1/

.container { 
    background-color: #333333; 
    width: 990px; 
    display: block; 
    position: relative; 
} 
.left { 
    background-color: red; 
    width: 300px; 
    display: inline-block; 
    margin-left: -4px; 
} 
.splitter { 
    background-color: green; 
    width: 90px; 
    display: inline-block; 
    margin-left: -4px; 
} 
.right { 
    background-color: blue; 
    width: 200px; 
    display: inline-block; 
    margin-left: -4px; 
}

不使用id我建議使用class isntead因爲id只調用一次。

來源

2016-11-19 14:03:34

'margin-left：-4px;'不是與空白相關的'inline-block'佈局問題的最佳解決方案。標準的解決方法是設置'.container {font-size：0; }'然後重新設置你想要的字體大小。第一個解決方案雖然不會在OP的代碼中提到重複的id， – connexo

這裏是一個解決方案 - 你需要插入容器之間的一種特殊的div：

.container{ 
 
background-color: #333333; 
 
width:990px; 
 
} 
 

 
.left{ 
 
background-color: red; 
 
width:300px; 
 
float:left; 
 
} 
 

 
.splitter{ 
 
background-color: green; 
 
width:90px; 
 
float:left; 
 
} 
 

 
.right{ 
 
background-color: blue; 
 
width: 200px; 
 
float:left; 
 
} 
 
.clearfix { 
 
    clear: both; 
 
}

<div class="container"> 
 
    <div class="left">A</div> 
 
    <div class="splitter">B</div> 
 
    <div class="right">C</div> 
 
</div> 
 
<div class="clearfix"></div> 
 
<div class="container"> 
 
    <div class="left">D</div> 
 
    <div class="splitter">E</div> 
 
    <div class="right">F</div> 
 
</div>

來源

2016-11-19 14:06:59 Banzay

這已經是15年來糟糕的**做法了。這裏不需要額外的標記，只需應用自第二次世界大戰結束以來使用的clearfix解決方案，使元素包含浮動子元素。 – connexo

你必須處理花車和爲此，你需要了解什麼float S和BFC是：

有幾種方法可以做到這一點，一旦你閱讀了一些關於浮動，清除和塊格式化的內容，就應該瞭解它。

（在下面的代碼段的最後一個例子，老氣，甚至避免了浮體，但確實佈局）

/* DEMO purpose : Show the id or class being used on that container*/ 
 

 
section:before { 
 
    content: attr(id)' 'attr(class); 
 
    display: table; 
 
    background: #177EE5; 
 
    padding: 5px; 
 
    margin: 5px; 
 
    color: #fff; 
 
    text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black; 
 
    letter-spacing: 1px; 
 
    font-variant: small-caps; 
 
} 
 
/* your css turned into class to be valid since used for many tags */ 
 

 
.container { 
 
    background-color: #333333; 
 
    width: 990px; 
 
} 
 
.left { 
 
    background-color: red; 
 
    width: 300px; 
 
    float: left; 
 
} 
 
.splitter { 
 
    background-color: green; 
 
    width: 90px; 
 
    float: left; 
 
} 
 
.right { 
 
    background-color: blue; 
 
    width: 200px; 
 
    float: left; 
 
} 
 
/* wrapper for each examples */ 
 

 
section { 
 
    clear: both; 
 
    overflow: hidden; 
 
    margin: 1em; 
 
} 
 
/* different ways shown, usefull for testing only if you read about floats and dig a bit */ 
 

 
/* table */ 
 

 
.table .container { 
 
    display: table; 
 
} 
 
/* overflow */ 
 

 
.overflow .container { 
 
    overflow: hidden; 
 
} 
 
/* float */ 
 

 
.float .container { 
 
    float: left; 
 
} 
 
/* flex */ 
 

 
.flex .container { 
 
    display: flex; 
 
} 
 
/* inline-block */ 
 

 
.inline-block .container { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
} 
 
/* last examples without floats */ 
 

 
/*no float & ie8 */ 
 

 
#table div { 
 
    float: none 
 
} 
 
#table #first-row, 
 
#table > div { 
 
    display: table-row; 
 
} 
 
#table > div > div { 
 
    display: table-cell; 
 
} 
 
#table { 
 
    background-color: #333333; 
 
    width: 990px; 
 
    table-layout: fixed; 
 
} 
 
#left { 
 
    width: 300px; 
 
} 
 
#splitter { 
 
    width: 90px; 
 
} 
 
#right { 
 
    width: 200px; 
 
} 
 
#table > div > div { 
 
    background-color: red; 
 
} 
 
#table > div > div + div { 
 
    background-color: green; 
 
} 
 
#table > div > div + div + div { 
 
    background-color: blue; 
 
} 
 
#table:before { 
 
    display: table-caption; 
 
    width: 100%; 
 
    margin: 0; 
 
} 
 
#table > div:after { 
 
    content: "Notice there's a gap to fill here since cols do not cover the 990px"; 
 
    display: table-cell; 
 
}

<section class="your CSS :-: no BFC involved"> 
 
    <div class="container"> 
 
    <div class="left">A</div> 
 
    <div class="splitter">B</div> 
 
    <div class="right">C</div> 
 
    </div> 
 
    <div class="container"> 
 
    <div class="left">D</div> 
 
    <div class="splitter">E</div> 
 
    <div class="right">F</div> 
 
    </div> 
 
</section> 
 
<section class="table"> 
 
    <div class="container"> 
 
    <div class="left">A</div> 
 
    <div class="splitter">B</div> 
 
    <div class="right">C</div> 
 
    </div> 
 
    <div class="container"> 
 
    <div class="left">D</div> 
 
    <div class="splitter">E</div> 
 
    <div class="right">F</div> 
 
    </div> 
 
</section> 
 
<section class="overflow"> 
 
    <div class="container"> 
 
    <div class="left">A</div> 
 
    <div class="splitter">B</div> 
 
    <div class="right">C</div> 
 
    </div> 
 
    <div class="container"> 
 
    <div class="left">D</div> 
 
    <div class="splitter">E</div> 
 
    <div class="right">F</div> 
 
    </div> 
 
</section> 
 
<section class="float"> 
 
    <div class="container"> 
 
    <div class="left">A</div> 
 
    <div class="splitter">B</div> 
 
    <div class="right">C</div> 
 
    </div> 
 
    <div class="container"> 
 
    <div class="left">D</div> 
 
    <div class="splitter">E</div> 
 
    <div class="right">F</div> 
 
    </div> 
 
</section> 
 
<section class="flex"> 
 
    <div class="container"> 
 
    <div class="left">A</div> 
 
    <div class="splitter">B</div> 
 
    <div class="right">C</div> 
 
    </div> 
 
    <div class="container"> 
 
    <div class="left">D</div> 
 
    <div class="splitter">E</div> 
 
    <div class="right">F</div> 
 
    </div> 
 
</section> 
 
<section class="inline-block"> 
 
    <div class="container"> 
 
    <div class="left">A</div> 
 
    <div class="splitter">B</div> 
 
    <div class="right">C</div> 
 
    </div> 
 
    <div class="container"> 
 
    <div class="left">D</div> 
 
    <div class="splitter">E</div> 
 
    <div class="right">F</div> 
 
    </div> 
 
</section> 
 
<p>another way without float including IE8 ?</p> 
 
<section id="table" class="table"> 
 
    <div id="first-row"> 
 
    <div id="left">A</div> 
 
    <div id="splitter">B</div> 
 
    <div id="right">C</div> 
 
    </div> 
 
    <div> 
 
    <div>D</div> 
 
    <div>E</div> 
 
    <div>F</div> 
 
    </div> 
 
</section>

有可能是從相同的代碼塊的更多示例和漂浮的孩子。

來源

2016-11-19 15:30:07

CSS如何強制容器顯示在元素浮動的前一容器下方

回答

相關問題