我试图布置一个有两列的表格式页面.我希望最右边的列停靠在页面右侧,此列应具有不同的背景颜色.右侧的内容几乎总是小于左侧的内容.我希望右侧的div始终足够高,以便到达它下面的行的分隔符.如何使背景颜色填充该空间？
.rightfloat {
color: red;
background-color: #BBBBBB;
float: right;
width: 200px;
}
.left {
font-size: 20pt;
}
.separator {
clear: both;
width: 100%;
border-top: 1px solid black;
}<div class="separator">
<div class="rightfloat">
Some really short content.
</div>
<div class="left">
Some really really really really really really
really really really really big content
</div>
</div>
<div class="separator">
<div class="rightfloat">
Some more short content.
</div>
<div class="left">
Some really really really really really really
really really really really big content
</div>
</div>编辑:我同意这个例子非常像桌子,实际的表格将是一个不错的选择.但是我的"真实"页面最终将不那么像桌子了,我只想先掌握这个任务!
此外,出于某种原因,当我在IE7中创建/编辑我的帖子时,代码在预览视图中正确显示,但是当我实际发布消息时,格式化将被删除.在Firefox 2中编辑我的帖子似乎有用,FWIW.
另一个编辑:是的,我不接受GateKiller的回答.它确实在我的简单页面上很好地工作,但不是在我实际较重的页面中.我将调查你们所指出的一些链接.
Pol*_*nby 22
咳咳...
对您的问题的简短回答是,您必须将100%的高度设置为body和html标记,然后将每个div元素的高度设置为100%,使其成为页面高度的100%.
实际上,100%的高度在大多数设计情况下都不起作用 - 这可能很短但不是一个好的答案.谷歌"任何列最长"的布局.最好的方法是将左右两个cols放在一个包装器中div,浮动左右两个cols然后浮动包装器 - 这使它伸展到内部容器的高度 - 然后在外包装器上设置背景图像.但是如果你得到IE"双边缘浮动bug",请注意浮动元素的任何水平边距.
Gat*_*ler 10
尝试一下:
html, body,
#left, #right {
height: 100%
}
#left {
float: left;
width: 25%;
}
#right {
width: 75%;
}<html>
<body>
<div id="left">
Content
</div>
<div id="right">
Content
</div>
</body>
</html>有些浏览器支持CSS表,因此您可以使用各种CSS display: table-*值创建这种布局.Rachel Andrew提供了有关CSS表格的更多信息(以及同名书籍):你所知道的关于CSS的一切都是错误的
如果在不支持CSS表的旧浏览器中需要一致的布局,则需要做两件事:
使"table row"元素清除其内部浮动元素.
最简单的方法是设置overflow: hidden哪个照顾大多数浏览器,并在旧版本的IE中zoom: 1触发hasLayout属性.
还有许多其他清除浮动的方法,如果这种方法导致不良副作用,你应该检查问题'clearfix'哪个方法最好,以及有关其他方法布局的文章.
平衡两个"表格单元格"元素的高度.
有两种方法可以解决这个问题.您可以通过在"表格行"元素(人造列技术)上设置背景图像来创建相等高度的外观,也可以通过为每个列提供大填充和同样大的负边距来使列的高度匹配.
人造柱是一种更简单的方法,当一列或两列的宽度固定时,它非常有效.另一种技术科佩斯与可变宽度列更好(根据百分比或em单位),但如果你直接在列内链接内容可能会导致某些浏览器的问题(例如,如果一列载<div id="foo"></div>并链接到您#foo)
这是一个使用填充/边距技术来平衡列高度的示例.
html, body {
height: 100%;
}
.row {
zoom: 1; /* Clear internal floats in IE */
overflow: hidden; /* Clear internal floats */
}
.right-column,
.left-column {
padding-bottom: 1000em; /* Balance the heights of the columns */
margin-bottom: -1000em; /* */
}
.right-column {
width: 20%;
float: right;
}
.left-column {
width: 79%;
float: left;
}<div class="row">
<div class="right-column">Right column content</div>
<div class="left-column">Left column content</div>
</div>
<div class="row">
<div class="right-column">Right column content</div>
<div class="left-column">Left column content</div>
</div>Natalie Downe的这个Barcamp演示在确定如何添加额外的列和漂亮的间距和填充时也很有用:等高度列和其他技巧(这也是我第一次了解边距/填充技巧以平衡列高度的地方)
我放弃了严格的CSS并使用了一点jquery:
var leftcol = $("#leftcolumn");
var rightcol = $("#rightcolumn");
var leftcol_height = leftcol.height();
var rightcol_height = rightcol.height();
if (leftcol_height > rightcol_height)
rightcol.height(leftcol_height);
else
leftcol.height(rightcol_height);