內聯元素的匹配高度

我有一個問題（大約是我第三次碰到它），我有一個容器左右分區。內聯元素的匹配高度

如果他們是不同的長度（右邊比左邊或其他方式更長），我怎麼能讓另一個不使用Javascript拉伸[高度]。

我不想得到表，我認爲繼承會做到這一點（但它只是繼承自動）。似乎沒有一個簡單的答案。或者我應該只使用表格！？有什麼問題嗎？

這個問題是吹我的腦海，應該怎麼太簡單......

提前感謝！

編輯：我舉個例子：

<body style="background: #000000 url(????.com);"> 
    <div id="container" style="margin:0 auto; width:996px; height: auto; background: transparent; overflow:hidden;"> 
     <div id="left" style="float:left; width:690px"> 
      <div style="background-color:#FFFFFF;">Content</div> 
      <div style="background-color:#FFFFFF;">content</div> 
     </div> 
     <div id="right" style="float:left; width:306px"> 
      <div style="background: transparent;">Content<br />Content<br />content<br/>Last line</div> 
      <div style="background-color:#FFFFFF;">Content</div> 
     </div> 
    </div> 
</body>

正如你所知道的，左邊比右邊要小得多。身高：100％似乎什麼都不做。

結果：沒有JS支持是不可能的。歡呼一切。

來源

2009-08-26 Dorjan

你想在標題中說'高度'嗎？你想讓我爲你解決頭銜嗎？ – 2009-08-26 16:37:33

是啊哎呀:)謝謝！ – Dorjan 2009-08-26 16:39:11

我仍然不能分辨你是否在問高度或寬度。 – 2009-08-26 16:49:41

如果您需要IE6和IE7只怕支持，你不容做，在沒有表或JavaScript只是CSS。

對於其他瀏覽器，您可以使用display：table-cell和display：table-row方式。

當然，如果你真的不需要列高度相等，但看起來像這樣，使用背景圖像僞造它。

來源

2009-08-26 17:01:42 jeroen

正如我的想法。對於我的第二個問題，我有什麼理由不「使用表格」嗎？或者這是足夠的第二個官方問題/線程 – Dorjan 2009-08-26 17:04:23

我認爲jeroen是正確的......我的答案，我早些時候發佈只適用於如果你有一個容器上設置的高度。如果你用javascript來做這件事，請在div上調用scrollHeight或overflowHeight屬性。這會給你div的高度，它可以用來設置其他div的高度。 – Zoidberg 2009-08-26 17:04:47

有許多原因不使用表格，只是看看SO（渲染時間，屏幕閱讀器等）。然而，也有正當理由使用表，但我絕對不建議將整個頁面包裝在一個。我想你必須決定什麼更糟糕，表或JavaScript :-) – jeroen 2009-08-26 17:08:12

http://www.alistapart.com/articles/fauxcolumns/

對於任何事情相對簡單的人造列將做的工作，你只是重複垂直模仿列的簡單固體BG顏色的圖像。如果它更復雜，則需要進行排序組合。

見我的答覆這裏更多的技術： 2 column CSS div with stretchable height

來源

2009-08-26 16:37:27

謝謝，我會看看人造技術。 – Dorjan 2009-08-26 17:14:59

這裏的問題是，它不適用於透明度 – Dorjan 2009-08-26 17:19:07

你有鏈接到設計？ – 2009-08-26 18:30:57

如果你只是希望它出現的列的長度相同，你可以使用這個醜陋的黑客：

.rightDiv, .leftDiv 
{ 
    margin-bottom: -1000px; 
    padding-bottom: 1000px; /*1000 + real padding*/ 
} 
.wrapper 
{ 
    overflow: hidden; 
}

基本上，它會導致兩列，將進一步擴大1000像素比他們應該與不必要的位隱藏。儘管如此，不會使用底部邊框。

顯然，這實際上並沒有使它們長度相同。

來源

2009-08-26 17:04:56 Eric

有趣的黑客感謝，但我寧願不:) – Dorjan 2009-08-26 17:07:24

內聯元素的匹配高度

回答

相關問題