我正在尝试将表格列分为两列。我希望最右边的列停靠在页面的右边,并且此列应具有不同的背景色。右侧的内容几乎总是小于左侧的内容。我希望右侧的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中创建/编辑帖子时,代码可以正确显示在预览视图中,但是当我实际发布消息时,格式会被删除。FWIW在Firefox 2中编辑我的帖子似乎有效。
另一个编辑:是的,我不接受GateKiller的回答。在我的简单页面上,它确实确实可以很好地工作,但在我实际的较重页面上却不能。我将研究大家都指出的一些链接。
啊…
这个问题的简短答案是,您必须将body和html标记的高度设置为100%,然后在要使页面高度为100%的每个div元素上将高度设置为100%。
实际上,在大多数设计情况下100%的高度将不起作用- 这可能很短,但这不是一个好答案。Google“任何列最长”的布局。最好的方法是将左右cols放入包装器中div,使左右cols浮动,然后使包装器浮动- 这使它伸展到内部容器的高度-然后在外部包装器上设置背景图像。但是请注意浮动元素上的任何水平边距,以防出现IE“双边距浮动bug”。
div