看来您可能需要重新考虑 html 的结构。一方面,使用内联样式是一种不好的做法,因为它会使代码难以维护并且可读性降低。
此外,考虑到整个.child
div 的内容使用的不同颜色块,这些内容区域可能应该是嵌套在 div 中的单独.child
div。
所以,如果我理解正确的话,这里是 HTML:
<div class="contain">
<div class="row">
<!-- parent div: -->
<div class = "parent">
<div class = "child">
<div class = "red">
</div>
<div class = "yellow">
</div>
<div class = "blue">
</div>
</div>
</div> <!-- end of parent div -->
<!-- parent div: -->
<div class = "parent">
<div class = "child">
<div class = "blue">
</div>
<div class = "yellow">
</div>
<div class = "red">
</div>
</div>
</div> <!-- end of parent div -->
</div> <!-- end of row -->
</div> <!-- end of contain -->
...这是CSS:
.contain {
height: 120px;
width: 500px;
border: thin solid #FF0000;
overflow: scroll;
}
.row {
height: 100px;
width: 700px;
}
.parent {
height: 100px;
width: 100px;
display: inline-block;
border-right: thin solid #666666;
border-bottom: thin solid #666666;
position: relative;
}
.child {
width: 90px;
height: 20px;
/*float: left; ...don't need this one */
}
.red {
height: 100%;
background-color: red;
}
.yellow {
height: 100%;
background-color: yellow;
}
.blue {
height: 100%;
background-color: blue;
}
此外,您不需要
float: left
在
.child
div 上使用,因为
display: inline-block
在
.parent
div 上具有相同的效果。
这是一个有趣的链接:
http ://robots.thoughtbot.com/post/159806965/how-i-learned-to-stop-floating-and-love-the