Question

我正在尝试获取一个包含3 DIVS Left | Center | Right的页面，它可以在包装div的中心显示Center，Left | Center，Center | Right。

我正在使用jQuery切换来切换Left，Right或两个DIVS关闭（显示：无）。我尝试了几种方法却没有成功。如果我使用DIVS内联块并使用align-text：center，则DIVS中的文本会获得不需要的格式。如果我向左漂浮所有DIVS然后使包装div宽度：80％; margin：0 auto;，这只是半中心并增加了无用的边距，当重新调整浏览器的大小时，如果宽度为100％，则其中一个DIVS会更快地进入下一行。

实施例。 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;
}

Answer 1

这样的东西？

HTML

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

CSS

#wrapper{
    width: 100%;
    min-width: 320px;
}
.centering{
    margin: 0 auto;
    width: 300px;
}
#left{
    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;
}

您可以添加媒体查询来处理当#wrapper对于包含div而言过小时会发生什么。那或者只是给我一个min-width包装。

Answer 2

我最终使用的方法是一个包含margin-left的包装div：auto;和margin-right：auto;，然后让包装器中的所有div浮动。然后，当发生切换更改时，包装器div的宽度通过JavaScript设置为其中可见div的总和。

Answer 3

您只需设置正确的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，您可以动态更改尺寸，但仍然可以正确匹配。

Answer 4

我认为如果我没弄错的话，这就是你要找的东西：

#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;
}

动态地居中一个或两个DIV

4 个答案:

HTML

CSS