右對齊的子div沒有擴大動態寬度的父母

Question

我一直有麻煩找到這一個。

我有一個是在身體margin: 0 auto;中心的股利。 它包含多個div。我想它擴大到它的最寬的兒童的寬度width: auto;

問題是我想有一個孩子的div在右邊對齊，但是這擴大了我的父母到100％。如果父母沒有固定的寬度，我會如何實現這一點？

Answer 1

您可以通過將包裝div設置爲inline-block，並將text-align: center設置在其父級上（而不是使用margin: 0 auto;）來做到這一點。這裏有一個例子：http://jsfiddle.net/joshnh/6Ake5/

這裏是HTML：

<div class="wrapper"> 
    <div class="foo"></div> 
    <div></div> 
    <div></div> 
</div> 

而CSS：

body { 
    text-align: center; 
} 
div { 
    border: 1px solid red; /* To see what is going on */ 
} 
.wrapper { 
    display: inline-block; 
    text-align: left; /* Resetting the text alignment */ 
    vertical-align: top; /* Making sure inline-block element align to the top */ 
    /* Inline-block fix for IE7 and below */ 
    zoom: 1; 
    *display: inline; 
} 
.wrapper div { 
    float: left; 
    height: 200px; /* To see what is going on */ 
    margin: 10px; /* To see what is going on */ 
    width: 200px; /* To see what is going on */ 
} 
.foo { 
    border-color: blue; /* To see what is going on */ 
    float: right; 
}​