CSS容器的DIv高度。浮動DIV問題

您可以強制容器DIV高度容納兩個浮動DIV兒童嗎？有一個我可以用來做到這一點的花哨技巧？我正在試圖在父div中創建兩個大小相同的div。我希望他們能夠在他們之間留下一點點空白並排出現。 Child2傾向於彈出並且在Child1下面。注意Child2包含一個表。我應該漂浮嗎？CSS容器的DIv高度。浮動DIV問題

HTML：

<div id="parent"> 
    <div id="child1"></div> 
    <div id="child2"> 
    <table><tr><td>content</td></tr></table> 
</div> 
</div>

CSS：

div#parent 
{ 
    background-color: #C6E4E0; 
    border: solid 3px #017E6F; 
    font-family: Arial; 
    font-size: 10pt; 
    font-weight: bold; 
    padding-left: 5px; 
    padding-right: 5px; 
    width:99%; 
} 

div#parent div 
{ 
    width:49%; 
    float:right; 
    padding:3px; 
} 

div#parent div:first-child 
{ 
    float:left; 
}

來源

2009-08-18 Hcabnettek

#container { width:200px; } 
.floated { width:100px; float:left; } 
.clear  { clear:both; } 

<div id="container"> 
    <div class="floated">A</div> 
    <div class="floated">B</div> 
    <div class="clear"></div> 
</div>

來源

2009-08-18 15:58:54 Sampson

這不是一個明確的/佈局的問題，他的問題是浮動不是並排顯示。 – kmiyashiro 2009-08-18 19:05:23

我不是clear: both;風扇，我寧願做在喬納森Sampsons例如：

#container { width:200px; overflow: hidden; } 
.floated { width:100px; float:left; }

<div id="container"> 
    <div class="floated">A</div> 
    <div class="floated">B</div> 
</div>

來源

2009-08-18 16:02:02 janhartmann

這不是清算/佈局問題，這是一個浮動問題。 – kmiyashiro 2009-08-18 19:04:53

其實這對我有用。避免額外的「明確：兩個」div，父母得到正確的高度，包括填充。 – Axel 2013-03-07 00:33:15

順便說一句，你想

div#parent > div { float:left; }

，而不是

div#parent div:first-child { float:left; }

這仍然是IE6不友善，但它會浮既孩子的DIV。

來源

2009-08-18 16:02:55

其實不是，他想把第一個div放到右邊，第二個div放到左邊，所以第一個孩子是正確的。 – kmiyashiro 2009-08-18 18:55:59

當然它不會在IE中工作... – kmiyashiro 2009-08-18 19:04:07

啊是的，我現在看到了，謝謝。 – 2009-08-18 21:50:26

我使用了clearfix類。

.clearfix:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 

.clearfix { 
    display: inline-block; 
} 

/* Hides from IE-mac \*/ 
/** html .clearfix {height: 1%;}*/ 

.clearfix { 
    display: block; 
} 

/* End hide from IE-mac */

那麼就使用這個類在每一個浮動元素的容器。

來源

2009-08-18 16:07:07

這不是一個clearfix問題的傢伙，他的問題是他的兩個浮動div並不是並排顯示。

首先，您不需要設置父div的寬度，divs是塊元素，這意味着它們會自動調整其寬度以佔據其父項的整個寬度（在此情況下，大概是父項的父項） div＃parent是body）。

因爲你明確地設置了寬度並給它填充，它可能會延長BEYOND身體。這並不重要，但是如果你將同樣的知識應用到浮動的div上，你就會明白爲什麼正確的那個可能會陷入低谷。

首先，如果您明確地將div的寬度設置爲百分比，則不需要添加填充。因爲您正在處理百分比寬度，因此最好將填充添加到div的內容而不是divs本身，因爲填充已添加到寬度。因此，如果您將10px填充添加到在100px父級中具有49％寬度的div，則它的寬度將爲49px + 10px + 10px（2面），總計算寬度爲69px。

由於您沒有發佈您的標記和內容或您正在測試的瀏覽器，所以我無法確切地說明div爲什麼會被忽略。有兩種可能的可能性。

您正在使用IE，它允許表擴展超出其父div，這將導致破損。嘗試明確地將表格寬度設置爲其父級的百分比或類似的比例。
49％width + padding =大於[parent-width] - [left-div-width]。這會導致它受到衝擊，因爲左側div和右側div對於父寬度來說太寬。

來源

2009-08-18 19:03:41 kmiyashiro

CSS容器的DIv高度。浮動DIV問題

回答

相關問題