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如何强制容器显示在元素浮动的前一容器下方

回答

相关问题