浮動佈局中的CSS縮放div

我想創建一個不使用height屬性的自動縮放佈局。我在兩個div之間使用浮動佈局，如圖所示。中間的盒子有不同大小的內容，我希望盒子能以這種方式縮放，所有盒子都有相同的高度。浮動佈局中的CSS縮放div

Picturey picture

2013-07-01 Martin Lechner

嘗試'高度：auto' –

正在使用您的列流體寬度，你會爲每一列使用不同的背景嗎？ –

我收到了更多信息。 IE 7應該是支持的，所以IE 7沒有這些js黑客的兒童選擇器可行。我目前的解決方案是最小高度，但我覺得這可以做到更大的可擴展性。由於給定的列布局，列寬度是固定的。這個CSS技巧文章基本上就是我想要的，謝謝伊恩。當支持傳統瀏覽器變得過時或我可以使用js時，我會這樣做，這讓我可以在IE 7中使用更新的選擇器。 –

嘗試在CSS的技巧reading this文章。

我最喜歡的選擇可能是Paul Irish的博客HTML5Rocks - 但它確實依賴於現代瀏覽器。我創建了一個JSFiddle根據他的代碼：

CSS

.box { 
    /* basic styling */ 
    width: 100%; 
    height: 95px; 
    border: 1px solid #555; 
    font: 14px Arial; 
    /* flexbox setup */ 
    display: -webkit-box; 
    -webkit-box-orient: horizontal; 
    display: -moz-box; 
    -moz-box-orient: horizontal; 
    display: box; 
    box-orient: horizontal; 
} 

.box > div { 
    -webkit-box-flex: 1; 
    -moz-box-flex: 1; 
    box-flex: 1; 
} 

/* our colors */ 
.box > div:nth-child(1){ background : #FCC; } 
.box > div:nth-child(2){ background : #CFC; } 
.box > div:nth-child(3){ background : #CCF; }

HTML

<div class="box"> 
    <div>A</div> 
    <div>B</div> 
    <div>C</div> 
</div>

然而注這不會對舊版瀏覽器，如果工作你的目標是那些，我建議你只是採用表格佈局。

來源

2013-07-01 09:30:20

僅鏈接就是一個不好的答案......（它可能會中斷）也許嘗試總結一下你認爲是最好的和/或發佈一些簡短的標記的例子。 – Christoph

我同意你的看法，並且我想提供一些更多的幫助，但是我想這篇文章爲你提供了許多針對不同問題的解決方案（例如，如果列是可變寬度和需要背景的話），而我我不確定在這個問題上表達了什麼。我會探討更多信息。 –

Christoph，更好？ –

我相信

請嘗試本教程

http://line25.com/articles/create-sidebars-of-equal-height-with-faux-columns

來源

2013-07-01 09:31:33 falguni

請參閱評論Ian的回答... – Christoph

我已經做出了JsFiddle。

我基本上做的，是通過結合使用position:absolute與top和bottom CSS屬性來迫使內的div充分的高度。

HTML：

<div id="top"></div> 
<div id="middle"></div> 
<div id="bottom"></div>

CSS：

body{ 
    margin: 0px; 
    padding: 0px; 
    border: 0px; 
} 

#top{ 
    width: 100%; 
    height: 30px; 
    background: blue; 
    position: absolute; 
} 

#bottom{ 
    width: 100%; 
    height: 30px; 
    background: yellow; 
    position: absolute; 
    bottom: 0px; 
} 

#middle{ 
    width: 30%; 
    position: absolute; 
    top: 30px; 
    bottom: 30px; 
    background: gray; 
}

來源

2013-07-01 09:33:02

請參閱Ian回答的評論...而是在回答中張貼標記的相關部分。 – Christoph

這是他要求的嗎？我想他是問他如何能有三列相等的高度。 –

如果您願意，您可以添加列，但這是問題中顯示的圖片所需的主要功能。如果你想要更多隻是複製粘貼中間的div並浮動它們。 –

使用min-height。下面提供了這個屬性的例子。

MDN

MSDN

來源

2013-07-01 09:35:29 mtt

http://www.w3fools.com/ – Christoph

有趣的信息。 – mtt