0

2 つの DIV を水平方向に中央揃え (および同じレベルで隣り合わせ) にしたいと考えています。これら2つのDIVを「コンテナ」DIVにラップすることでそれを達成できることは知っていますが、これを行うためのよりクリーンな方法があるかどうか疑問に思っていましたか? ありがとう

#bottom-left {
    float: left;
    width: 480px;;
    background: #5421c2;
}

#bottom-right {
    float: right;
    width: 480px;;
    background: #2ec4a6;

}
4

2 に答える 2

1

上記を達成する正しい方法

デモ(フィドル ウィンドウのサイズを変更して確認できます)

デモ 2 (デモンストレーションのために寸法を変更)

説明:ここでは、要素を水平方向に中央に配置し、浮動要素をラップする要素wrapperセットを使用しています。合計幅、つまり左浮動 div + 右浮動 div を割り当て、浮動要素が含まれているため、フロートをクリアするために使用します。クラスで使用しているプロパティの代わりにorを使用することもできますmargin: auto;div.wrap.clearoverflow: hidden;clearfix hacks.clear

.wrap {
    width: 960px;
    margin: auto;
    background: #000;
}

#bottom-left {
    float: left;
    width: 480px;;
    background: #5421c2;
    height: 300px;
}

#bottom-right {
    float: right;
    width: 480px;;
    background: #2ec4a6;
    height: 300px;
}

.clear:after {
    clear: both;
    display: table;
    content: "";
}
于 2013-09-05T15:01:44.777 に答える
1

これは、コンテナのない固定幅のアイテムでは一般的に不可能であると確信していますが、このような calc でこれを達成できる場合があります。

margin: 0 calc(50% - 480px);

計算もコンテナごとに異なります

これをテストすることはできません。うまくいかないかもしれませんが、calc が唯一のチャンスだと思います。

于 2013-09-05T15:09:32.817 に答える