4

ここに例があります

http://jsfiddle.net/BringMeAnother/LwXhE/

// html
<div class="container clearfix">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

// css
.container {
    background: red;
    padding: 10px;
}
.child {
    width: 100px;
    height: 100px;
    float: left;
}
.child:nth-child(even) {
    background: green;
}
.child:nth-child(odd) {
    background: blue;
}

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

赤い背景のコンテナーは、常に 100% に引き伸ばされているように見えます。私がやりたいのは、その幅をフローティングの子に依存させることです。この場合、100px の 3 倍です。

これが欲しい理由は以下の通りです。柔軟なレイアウトで、サイズの異なるいくつかの子要素を含むコンテナーがあります。これらの子の幅と量はさまざまです。子供たちはいつも浮かんでいます。目標は、浮遊する子供たちを中心に置くことです。したがって、常に 1 つの子要素がある場合は、その margin-right と margin-left を auto に設定するだけです。ただし、並べて配置したい子がいくつかありますが、横に並べた後、その行をページの中央に配置したいと思います。子の量とそれぞれの幅が事前に決定されていないため、コンテナに固定幅を与えることはできません。

JavaScript でこれを行うことができると思いますが、純粋な css ソリューションがあるかどうか疑問に思います。ありがとう

4

4 に答える 4

3

コンテナーdiv を別のラッパーdiv でラップすることにより、赤いコンテナー div を中央に配置でき、赤い div はフローティングの子と同じ幅になります。

HTML

<div class="centered">
    <div class="container">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
    </div>
</div>

CSS

.centered {
    text-align: center;
}
.container {
    background: red;
    padding: 10px;
    display: inline-block;
}
.child {
    width: 100px;
    height: 100px;
    float: left;
}
.child:nth-child(even) {
    background: green;
}
.child:nth-child(odd) {
    background: blue;
}

フィドル: http://jsfiddle.net/SbPRg/

于 2013-08-28T08:25:55.383 に答える
0

ここでのパーティーには遅れましたが、本当に必要なのは を追加することだけdisplay: inline-blockです。divを中央に配置するには、 divを含むもの.containerに適用するだけです。text-align: center

JSFiddle: http://jsfiddle.net/LwXhE/24/

于 2014-10-21T06:48:50.027 に答える
-3

position:fixed;コンテナに追加 

.container {
    background: red;
    padding: 10px;
    position:fixed;

フィドル

于 2013-08-28T08:24:40.237 に答える