如何浮動未懸浮div內的div？

我有一個divs的簡單問題。如何在一個未浮動的DIV內浮動3個DIV？如何浮動未懸浮div內的div？

這裏是我的代碼：

<div style="margin:0 auto;width:1240px;border:1px solid #000000;"> 
    <div style="width:200px;height:50px;float:left;border:1px solid #000000;"> 
     test  
    </div> 
    <div style="width:200px;height:50px;float:left;border:1px solid #000000;"> 
     test  
    </div> 
    <div style="width:200px;height:50px;float:left;border:1px solid #000000;"> 
     test  
    </div> 
</div>

我想這個浮動DIV父母或方法來他們中心沒有浮動...顯示器內部子div inline-block的不會爲孩子工作的div因爲它們的高度不同，一個div是一個圖像...所以我認爲最好的方法是浮動它們並優化邊距...在這種情況下，我希望父div在屏幕上居中，所以我使用margin ：0自動而不是浮動，但這導致子div不拉伸父div，它顯示爲一條細線。

可以測試我創建理解問題的小提琴： http://jsfiddle.net/tQpM5/

感謝

來源

2013-02-12 Michael Samuel

你能完成你擺弄所有的div，你正在使用的圖像，這樣我們就可以找出你的意思是更容易？ – Bigood 2013-02-12 00:50:50

您需要清除浮標。有許多技術可以做到這一點。 – steveax 2013-02-12 00:52:28

如果你還有'vertical-align：top'，我會認爲'display：inline-block'就可以工作得很好。但是，呃。 – cHao 2013-02-12 00:54:47

如果我理解正確的話，你想在同一行中心3盒：

.wrapper{ 
    margin:0 auto; 
    text-align:center; 
    vertical-align: top; 
} 

.box{ 
    width:200px; 
    height:50px; 
    display:inline-block; 
    text-align:left; 
}

HTML：

<div class="wrapper"> 
    <div class="box"> 1 </div> 
    <div class="box"> 2 </div> 
    <div class="box"> 3 </div> 
</div>

demo

來源

2013-02-12 00:53:08

'vertical-align：top;'做的竅門：）問題是垂直對齊，因爲一個div出現比其他兩個更高，並且所有都在父div內的同一行上...所以問題在於垂直對齊...謝謝：D – 2013-02-12 01:24:56

你需要的是給父DIV：overflow:hidden;，因此它可以包含其子格。

子div將會彼此浮動，但是當您重新調整瀏覽器的大小時，它們將會相互浮動，爲了避免這種情況，您可以給父div分配一個min-width。

若要居中父div，您可以給它一個margin-left:auto; margin-right:auto;，但是您必須指定一個寬度，以便它不會伸展並獲取其所有可用寬度。

既然你選擇使用浮動而不是inline-block，那麼剩下的唯一辦法就是像你說的那樣處理margins。

DEMO

來源

2013-02-12 00:52:50

由於所有的孩子他們說，div的寬度比父母的小自然排隊。試着給每個孩子分配一個位置：親戚;保證金：自動。這樣，他們應該在父母的中心位置

來源

2013-02-12 00:53:33 mhartington

父div顯示爲一行，因爲其內容是浮動的，將其高度設置爲1px。爲了解決這個問題，你需要在這個元素之後清除浮點數。通常被稱爲clearfix。

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

然後，你可以像平常那樣浮動孩子。我在父級使用了margin：auto來使其居中。

看到這個演示：

http://jsfiddle.net/c2NjZ/

注意有關clearfixing舊瀏覽器的支持，請參閱：

http://css-tricks.com/snippets/css/clear-fix/

來源

2013-02-12 00:57:50

請注意，「舊瀏覽器「基本上是指」IE7「。 :) – cHao 2013-02-12 01:00:58

正確;）良好的舊IE7 – 2013-02-12 01:01:49

容器div的浮動和它的孩子div的浮點值（或無浮動）是彼此獨立的，你只需要在關閉父div之前清除子div：

<style type="text/css"> 
.clearfloat {clear:both;height:0;font-size:1px;line-height:0px;} 
</style> 

<div class="parent"> 
    <div class="child" style="float:left;"> 
     Hi 
    </div> 
    <div class="child" style="float:right;"> 
     There 
    </div> 
    <br class="clearfloat"> 
</div>

更新到你的例子：http://jsfiddle.net/tQpM5/2/

來源

2013-02-12 00:58:30 Kaceykaso

如何浮動未懸浮div內的div？

回答

相關問題