0

何らかの理由で、左右の余白を自動に設定すると、レイアウトの下部セクションが中央に配置されないように見えます

http://codepen.io/anon/pen/kvtcp

例をご覧ください。

その後、あなたが提供したいくつかの例でコードを変更しましたが、別の問題があります。一番下の div が左右のセクション div に押し上げられましたか?

margin-top 20px を使用しましたが、何も起こりません

よろしく

4

5 に答える 5

3

削除するだけです：

float:left

.bottomsection クラスから追加

clear:both;

代わりは...

于 2013-09-20T14:53:30.967 に答える
1

これは、div が左にフロートするように設定されていて、画面が左端にあるために発生しています。上記の div には、それらを埋め込むためのマージンが残っています。

コンテナを中央に配置することをお勧めします。

http://codepen.io/anon/pen/sHvCA

body{  
    background:#90F;
}
#container {
    width: 1000px;
    height: 1200px;
    padding-top: 25px;
    overflow: auto;
  margin:0 auto;
}

.header {
    width: 800px;
    height: 100px;
}
.leftimage {
    float: left;
}
.middle {
    height: 200px;
    background:#FFF;
    width: 800px;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
}

.leftsection {
    width: 300px;
    background-color: #FFF;
    height: 400px;
    margin-top: 10px;
    float: left;
    margin-left: 100px;
}
.rightsection {
    background-color: #0F0;
    height: 400px;
    width: 479px;
    float: left;
    margin-top: 10px;
    margin-left: 20px;
  margin-bottom: 20px;
}

.bottomsection {
  clear:both;
    height: 200px;
    background: #FFF;
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}

</style>
于 2013-09-20T14:54:24.107 に答える
0

理由もなく浮いているため、左側に表示されます。それを削除します。今回は問題ないはずですが、何も入っていないので見えません。overflow:hidden;これを避けるために追加します。次に、マージンを与えることもできます。また、フロートを賢く使用してください。すべての問題でフロートが必要になるわけではありません。

于 2013-09-20T14:53:18.757 に答える
0

わかりました、一番下の div からフロートを削除します。

.bottomsection {
    height: 200px;
    background: #FFF;
    width: 800px;
    /*float: left;*/
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
}

そしてあなたのHTMLでは、フロートをieでクリアする必要があります

<div class="leftsection"></div> 
<div class="rightsection"></div>
<div style="clear:both;"></div>
<div class="bottomsection"></div>

これは迅速で汚い解決策です。

これは、フローティングdivについての良いリンクです。

http://css-tricks.com/all-about-floats/

于 2013-09-20T14:51:55.510 に答える
0

それはあなたがそれを持っfloat:left;ているからです。それを削除し、clear:both;代わりに追加します。

左右のフローティング div を別の div でラップoverflow:hiddenし、外側の div に適用してより適切に制御することをお勧めします。

于 2013-09-20T14:51:04.107 に答える