有人可以告诉我这里我做错了什么。我试着写清楚:两者;也在浮动元素内,但似乎没有任何效果。
我希望绿色边框内的那些小橙色框不是这样的(见图)。
Fiddle here和代码:
<style type="text/css">
.wrap {
border:solid 2px green;
}
.wrap div {
margin: 0 0 0 10px;
padding: 10px;
text-align: center;
width: 67px;
float:left;
}
.wrap div span {
display:block;
background-color:orange;
margin:2px;
}
.clear {
clear:both;
}
</style>
<div class="wrap">
<div>
<span>xx</span>
<span>xx</span>
<span>xx</span>
</div>
<div>
<span>yy</span>
<span>yy</span>
<span>yy</span>
</div>
<div>
<span>zz</span>
<span>zz</span>
<span>zz</span>
</div>
<div class="clear"></div>
</div>
答案 0 :(得分:4)
答案 1 :(得分:2)
你正在浮动<div class="clear">
。这就是为什么它不起作用。
尝试使用此选择器代替浮动divs
,以便不匹配清算div
:
.wrap div:not(.clear) {
margin: 0 0 0 10px;
padding: 10px;
text-align: center;
width: 67px;
float:left;
}
解决此问题的另一种方法是将float: none
添加到清算类:
.clear {
clear: both;
float: none !important;
}
答案 2 :(得分:1)
在。float:left;
div上添加wrap
Demo
答案 3 :(得分:1)
答案 4 :(得分:0)
.wrap {
border:solid 2px green;
overflow:hidden;
}
这应该在你的CSS中。
答案 5 :(得分:0)
或者使用
.wrap {
border: solid 2px green;
overflow: hidden;
}
并删除<div class="clear"></div>
所有其他答案也完全没问题。喜欢学习花车!