0

この質問は以前に何度も尋ねられたに違いないことを理解していますが、実際に既存の回答を見てみましたが、何もうまくいかないようです! 要素の幅を定義し、float:left を削除しようとしました (これは中央に配置されていないようで、レイアウトも壊れます..)、それを display:block として設定しようとしました。フッターを使用してフロートをクリアする前に行いましたそのすべてで、 text-align center も使用してみました。しかし、ええ、何もそれを中心にしていないようです。

.container3col {
    width: 1200px;
    background: #FFFFFF;
    margin: 0 auto;
    display:block;
}

.leftbar {
    width: 180px;
    padding-bottom: 10px;
    background:#00FF00;
    float:left;
    }
.content {
    padding: 10px 0;
    width: 840px;
    background:#FF0000;
    float:left;
}
.rightbar {
    width: 180px;
    padding: 10px 0;
    background:#00F;
    float:left;
}

現在、私の HTML パーツには多くのコンテンツが含まれているため、すべてを投稿するのは少し面倒かもしれません。基本的に、コンテナー DIV を作成し、その中に leftbar、content、rightbar の DIV を配置しました。すべてのコンテンツが DIV の幅の制約内に収まると確信しています。

私のコードに影響を与える可能性のあることの 1 つは、スクリプトを使用してコンテンツを display:none; から変更したことです。display:block (ユーザーがリンクをクリックして残りの記事を読み込めるようにするため)。

完全に機能するように見える前に、2列のレイアウトを作成しました。フロートなどを削除する必要なく、問題なく中央に配置されます。上記の段落で述べたように、何かをブロックするための display:none も使用されます。2 列のページは問題なく動作します。

ありがとう。

編集：これはそれのフィドルです。多くのコンテンツが不必要だったので (つまり、フィラー テキストだけの記事)、その一部を削除しました。http://jsfiddle.net/Snail489/W6C9v/6/

4

2 に答える 2

0

margin: 0 auto;試す代わりにtext-align:center

于 2013-10-11T08:31:38.247 に答える
0

これは私のために働く

<style>
/* CSS Document */
body {
    font-size:12px;
    color:#000000;
    font-family: Tahoma, Geneva, sans-serif;
    }
.container3col 
    {
     width: 1200px;
     margin: 0 auto;
     display:block;
    }

.leftbar {
    width: 180px;
    padding-bottom: 10px;
    background:#5F5;
    float:left;
}

.content {
    padding: 10px 0;
    width: 840px;
    background:#F55;
    float:left;
}

.rightbar {
    width: 180px;
    padding: 10px 0;
    background:#5FF;
    float:left;
}

.header {
    width:1200px;
    background:url(../texture.jpg);
}

.footer {
    background: #FFF;
    position: relative;
    clear: both;
    background:url(../texture.jpg);
}
</style>

私のjsfiddleをチェックしてください：http://jsfiddle.net/pB2aC/

于 2013-10-11T09:29:14.133 に答える