0

これは私を夢中にさせています。私はこのことに比較的慣れていないので、過去1時間でこれを理解しようとしています. 誰かがこれで私を助けることができれば、私は本当に感謝しています.

次のコードがあります。

<div class="middle_box">
     <div class="box left">
          Some large text
     </div>
     <div class="box right">
          Some large text as well
     </div>
</div>

CSS:

.middle_box {
    height: 260px;
    margin: 0 auto;
    width: 960px;
}
.box {
    float: left;
    font-size: 21px;
    margin-right: 50px;
    margin-top: 25px;
    padding-top: 25px;
    width: 390px;
}

ご覧のとおり、コンテナの幅は 960px です。ここで、2 つの .box 要素を 960px コンテナー内の中央に配置したいのですが、ここで迷ってしまいます。

私は何を試しましたか？

使ってみてmargin: 0px auto;、両側に margin-left を追加して偽造しようとしましたが、うまくいきませんでした。どうすればこれを達成できますか？

4

5 に答える 5

1

子要素がフローティングされているため、「.middle_box」をクリアする必要があります。

.middle_box:before, .middle_box:after {
    content: "";
    display: table;
}
.middle_box:after { clear: both; }

トリックを行う必要があります

于 2013-09-13T01:09:54.203 に答える
1

このハックを使用する最良の方法は、clearfix を呼び出します。

.middle_box:after {
        visibility: hidden;
        display: block;
        content: "";
        clear: both;
        height: 0;
        }
于 2013-09-13T01:10:04.517 に答える
0

フロートをセンタリングするのは大変ですが、フロートを使用する必要はありますか? 使用しない理由:

display: inline-block

両方を使用することには長所と短所がfloatありinline-block、どちらにも癖がありますが、最終的にはインラインブロックの方がはるかに便利で開発しやすいことがわかりました。これは、使用して問題を解決するためのフィドルですinline-block

デモフィドル

また、使用する場合の空白の癖についても注意してください（ただし、修正は簡単です）：

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

于 2013-09-13T08:31:15.497 に答える