0

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

我正在使用 jQuery 切换来切换左、右或两个 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;
}
4

4 回答 4

0

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

于 2013-04-13T02:26:05.683 回答
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 回答
0

像这样的东西？

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那或者只是像我一样给包装器一个。

于 2013-04-12T08:59:47.067 回答
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 回答