0

ラッパーdivの中央にCenter、Left | Center、Center | Rightを表示できる3つのDIVS Left | Center | Rightを持つページを取得しようとしています。

jQuery トグルを使用して、左、右、または両方の DIVS をオフに切り替えています (display:none)。成功せずにいくつかの方法を試しました。DIVS inline-block を作成して align-text: center を使用すると、DIVS 内のテキストに不要な書式が設定されます。すべての DIVS を左にフロートさせてから、折り返しの div 幅を 80%; にするとします。margin: 0 auto;, これはそれらを半中央に配置し、ブラウザのサイズを変更するときに DIVS の 1 つが幅が 100% の場合よりも速く次の行に移動する無駄なマージンを追加するだけです.

元。JSFIDDLE

HTML

<div id="wrapper">
    <div id="left">ONE</div>
    <div id="center">TWO</div>
    <div id="right">THREE</div>
</div>

CSS

#wrapper{
    width: 80%;
    margin: 0 auto;
    overflow: auto;
}
#left{
    display: none;
    width: 100px;
    height: 100px;
    background-color: #880000;
    float: left;
}
#center{
    width: 100px;
    height: 100px;
    background-color: #000088;
    float: left;
}
#right{
    width: 100px;
    height: 100px;
    background-color: #008800;
    float: left;
}
4

4 に答える 4

0

私が間違っていなければ、これはあなたが探しているものだと思います：

#wrapper{
    width: 80%;
    margin: 0 auto;
    position:relative;
    height:100px;
    min-width:300px;
}

#wrapper div{
    top:0;
}

#left{
    display: block;
    width: 100px;
    height: 100px;
    background-color: #880000;
    left: 0px;
   position:absolute;
}
#center{
    width: 100px;
    height: 100px;
    background-color: #000088;
    margin:auto;
    position:relative;
}
#right{
    width: 100px;
    height: 100px;
    background-color: #008800;
    right: 0px;
    position:absolute;
}
于 2015-11-27T23:10:08.087 に答える
0

必要なのは、正しいdisplay: table/-cell値を設定することだけです。そして削除widthする#wrapper

<div id="wrapper">
    <div id="left">ONE</div>
    <div id="center">TWO</div>
    <div id="right">THREE</div>
</div>

<style>
    #wrapper {display: table; margin: auto; width: auto;}
    #wrapper div {display: table-cell;}
    /* #wrapper #left {display: none} */ /* uncomment to hide just two cells */ 
</style>

http://jsfiddle.net/cjf4Q/35/ // 3 セル
http://jsfiddle.net/cjf4Q/34/ // 2 セル

このソリューションは、固定幅を に設定しなくても機能し#wrapperます。サイズを動的に変更しても、正しく収まります。

于 2015-02-14T06:05:34.730 に答える