0

Web サイトの 3 列目に問題があります。左右が空いている中央のみの内容にしたかった。left-margin を使用せずに中央の列を中央に設定するにはどうすればよいですか? コンテンツが右側の列を超えないように、中央の列に最大幅を設定するにはどうすればよいですか?

<div class="wrapper">
    <div class="left"></div>
    <div class="center">
        <div id="content1">

        </div>
        <div class="right"></div>
    </div>
</div>

.wrapper {
    display:block;
}

.left, .center, .right {
    margin:0 10px;
}

.left {
    float:left; 
    width:180px;
    position:fixed;
}

.center {
    float:left;
    width:880px;
    margin-left:200px;
}

.right{
    float:left;
    width:180px;
    position:fixed;
}
4

1 に答える 1

0

これには多くの方法があります。960 Grid Systemのようなものを使用するか、CSS flexbox を使用してみてください。これは非常に優れていますが、現在すべてのブラウザーでサポートされているわけではありません。

コードに: なぜ position: fixed を使用するのですか? あなたのコードは動作するはずです。削除してみてください。そして、ラッパー div でオーバーフローを auto に設定します。

作品: http://codepen.io/doodlebunch/pen/vGxol

.wrapper { 
  display:block; 
  overflow: auto;
}

.left { 
 float:left; 
 width:180px;
}

.center { 
 float:left;
 width:880px;
 margin: 0 10px;
}

.right{ 
  float:left;
  width:180px;
}

.left と .right を空白のままにしたい場合は、それらを削除して margin: 0 auto; を追加できます。あなたの.content-divに。

.content { 
 width:880px;
 margin: 0 auto;
}
于 2013-11-13T10:43:00.133 に答える