问题

我正在尝试用两列放出一个类似table的页面.我希望最右侧的列到页面的右侧,此列应该有一个不同的背景颜色.右侧的内容几乎总是小于左侧的内容.我希望右侧的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> 

编辑:我同意这个例子非常table-like,实际表将是一个很好的选择.但是我的“真实”页面最终会更像table-like,我只想先掌握这个任务!

此外,出于某种原因,当我在IE7中创建/编辑我的帖子时,代码在预览视图中正确显示,但是当我实际发布消息时,格式被删除.在Firefox 2中编辑我的帖子似乎有效,FWIW.


另一个编辑:是的,我不接受GateKiller的答案.它确实在我的简单页面上工作得很好,但不是在我的实际更重的页面中.我会调查y'all指出的一些链接.

  最佳答案

AHEM ...

问题的简短答案是,您必须将高度设置为 100% 到 body 和 html 标签,然后在每个 div 元素上将高度设置为 100%,您希望使页面的高度达到 100%。

实际上,100%的高度在大多数设计情况下都不起作用 – 这可能是短的,但它不是一个好的答案. Google“任何列最长”布局.最好的方法是将左和右的cols放在包装器div中,浮动左和右的cols然后浮动包装器 – 这使它延伸到内部容器的高度 – 然后在外部包装器上设置背景图像.但是如果您得到IE“双浮动边距”,则观察浮动元素上的任何水平边距.

  相同标签的其他问题

htmlcss