-1
我觉得这是一个很愚蠢的问题,而且css中的小东西总是让我感到困惑。无论如何,我有一个设计,我试图做2列。一个(这是一个300px的边栏),它在右边,另一个栏目应该填充剩余的空间。CSS Divs未正确对齐
正如你可以看到侧边栏放在左边的div下。
HTML:
<div class="wfix"><div class="col-fix">
<div class="col-lg">
<!--
<div id="block">
<bh>Homepage</bh>
<detail id="test">Loading...</detail>
</div>
-->
</div>
<div class="col-side">
</div>
</div></div>
CSS:
.wfix{ margin-left: 5em; margin-right: 5em; }
.col-fix {
display: table;
width: 100%;
table-layout: fixed;
}
.col-lg, .col-side {
color: #999;
margin: 0;
padding: 0;
}
.col-lg {
margin-left: 0;
margin-right: 300px;
padding-top: 0px;
display: block;
vertical-align: top;
background-color: blue;
min-height: 500px;
}
.col-side {
width: 300px;
float: right;
padding-top: 0px;
display: block;
vertical-align: top;
background-color: red;
min-height: 500px;
}
感谢您的帮助,杰克。
哇固定!我知道这是小事。为什么浮动元素首先出现?看起来很奇怪。 – MysteryDev
@ Jakes625由于浮动元素不能改变以前的元素,只能跟随其后的元素。在你的情况下,你希望'#col-side'推入'#col-lg',所以'#col-side'应该首先出现。 – Oriol
感谢您的解释! – MysteryDev