問題

我正在嘗試用兩列放出一個類似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