html - 動的幅で親を拡張せずに子divを右揃え

Question

私はこれを見つけるのに苦労しています。

私は体の中心にあるdivを持っていmargin: 0 auto;ます。複数のdivが含まれています。一番広い子の幅まで広げて欲しいwidth: auto;

問題は、子divの1つを右側に配置したいのですが、これにより親が100％に拡張されます。親の幅を固定せずにこれを達成するにはどうすればよいですか？

Answer 1

inline-blockラッパーdivをに設定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;
}​