並排divs及其高度存在一些問題

如果左div內的內容增加，整體佈局的高度將相應增加，並且所有內容都將如其應當：jsfiddle。然而，如果在高度合適的div增加里面的內容，佈局不增加它：jsfiddle 並排divs及其高度存在一些問題

<div class="outer"> 
    <div class="contain"> 
     <div class="one"> 
     </div><div class="two"> 
       <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 

     </div> 
    </div> 

    <div class="bottom"> 
    </div> 
</div>

CSS：

.outer { 
    display: block; 
    width: 500px; 
    min-height: 500px; 
    background-color: black;  
    border: 2px solid black; 
} 

.contain { 
    display: block; 
    width: 500px; 
    min-height: 500px; 
    background: red; 
} 

.one { 
    display:inline-block; 
    width: 200px; 
    min-height: 100px; 
    background: yellow; 
    bottom:200px; 
} 

.two { 
    float:right; 
    width: 300px; 
    min-height: 300px; 
    background: purple; 

} 

.bottom { 
    display:block; 
    background: blue; 
    width: 500px; 
    height:200px; 
    bottom: 0;  
}

希望得到一些指導。

來源

2012-12-17 sooper

我從你的代碼假設你想要兩個盒子（一個和兩個）底部對齊，如果他們不填充空間？如果是這樣，你應該試試這個：

.one { 
    display:inline-block; 
    width: 200px; 
    min-height: 100px; 
    background: yellow; 
    vertical-align: bottom; 
} 

.two { 
    display:inline-block; 
    width: 300px; 
    min-height: 300px; 
    background: purple; 
    vertical-align: bottom; 
}

你正在兩個一組寬度，所以設置既作爲inline-block，他們應該坐在並排側，兩佔用空間。浮動塊不佔用空間。

來源

2012-12-17 15:31:53

其實我需要把它們對齊到頂端，所以我把'bottom'改成了'top'，現在看起來工作正常，謝謝。 – sooper

將font-size：0添加到class =「contains」中，因爲它內嵌了div，它們本質上是將標記中的空白留空並創建間隙。如果需要，請分別在內部元素中添加font-size屬性。

來源

2012-12-17 15:32:02 Dharma

並排divs及其高度存在一些問題

回答

相關問題