最小高度div下的位置div

我的問題在於 - 如何將div放置在另一個具有最小高度樣式屬性的div底部。它看起來像這樣最小高度div下的位置div

|-------------------| 
    |wrapper   | 
    |----------|--------| 
    |min-height|min-heig| 
    | div | div | 
    |----------|--------| 
    |div that keeps  | 
    |  disappearing | 
    |-------------------|

所以我的問題是，如果最小高度的div正在擴大，比「的div不斷消失」流動的權利下，這些div的延伸，我怎麼能解決呢？碼 -

<div id="wrapper"> 
     <div id="left" style="float:left;min-height:200px;"> 
     content 
     </div> 
     <div id="right" style="min-height:200px;"> 
     content 
     </div> 
     <div id="disappearing" style="height:100px;"> 
     content 
     </div> 
    </div>

來源

2013-08-05 eLbor

請出示您所使用的代碼。 – eclipsis

請添加一些代碼，以便我們可以更好地幫助您。 –

對不起，忘了添加代碼。 – eLbor

我想到用最小高度之間的清除元件divs和消失的div將足以解決您的問題。

<div id="wrapper"> 
    <div id="left" style="border: 1px solid Red;float:left;min-height:200px;height:600px;">content</div> 
    <div id="right" style="border: 1px solid Green;min-height:200px; height:400px;">content</div> 
    <div style="clear:both;"></div> 
    <div id="disappearing" style="border: 1px solid Blue;height:100px;">content</div> 
</div>

http://jsfiddle.net/VBEfL/

來源

2013-08-05 21:40:44 Alex

就像一個魅力，真的很感謝你。 – eLbor

說實話，在這樣的情況下，最可靠和維護的解決方案是使用網格系統。一篇優秀的文章是Chris Coyier's "Don't Overthink It Grids"。

這裏是基本的，裁員位：

HTML：

<div id="wrapper"> 
    <div class="grid"> 
     <div id="left" class="col-1-2 module-min-200"> 
     content 
     </div> 
     <div id="right" class="col-1-2 module-min-200"> 
     content 
     </div> 
    </div> 
    <div class="grid"> 
     <div id="disappearing" class="module-fixed-100"> 
     content 
     </div> 
    </div> 
</div>

CSS：

[class*='col-'] { 
    float: left; 
} 

.col-1-2 { width: 50%; } 
.col-1-4 { width: 25%; } 
.col-3-4 { width: 75%; } 
.col-1-8 { width: 12.5%; } 
.col-1-3 { width: 33.33%; } 
.col-2-3 { width: 66.66%; } 

.grid:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 

*, *:after, *:before { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

[class*='col-'] { 
    padding-right: 20px; 
} 

[class*='col-']:last { 
    padding-right: 0; 
} 

.grid-pad { 
    padding: 20px 0 20px 20px; 
} 

.grid-pad > [class*='col-']:last-of-type { 
    padding-right: 20px; 
} 

.module-fixed-100 { height: 100px; } 
.module-min-200 { min-height: 200px; }

來源

2013-08-05 21:38:02

#disappearing{ 
    clear:both; 
    width:100%; 
}

來源

2013-08-05 22:18:46 Anon

最小高度div下的位置div

回答

相關問題