Question

我在一个容器中并排放置了三个div，它将自己设置为用户窗口的宽度。

我希望它们彼此相邻，并以动态容器中的单位为中心我想这样做没有将它们放入另一个div（主要是因为我在这个页面中有很多这样的内容）。

HTML：

<div id="content">
    <div id="nav_one">
        <h3>COLLECTIONS</h3>
        <p style="text-align:justify">blahblah</p>
    </div>
    <div id="nav_three">
        <h3>COLLECTIONS</h3>
        <p style="text-align:justify">blahblah</p>
    </div>
    <div id="nav_two">
        <h3>COLLECTIONS</h3>
        <p style="text-align:justify">blahblah</p>
    </div>
</div>

CSS：

#nav_one {
    width: 208px;
    float: left;
    padding: 20px 10px 20px 10px;
    text-align: center;
}

#nav_two {
    width: 208px;
    margin: 0 auto;
    padding: 20px 10px 20px 10px;
    text-align: center;
}

#nav_three {
    width: 208px;
    float: right;
    padding: 20px 10px;
    text-align: center;
}

Answer 1

好的，在下面的评论之后，我更好地了解你在寻找什么，而容器div需要208px的警告。我不认为margin：auto会在这里将所有三个中心放在一个组中，所以我建议使用float：left并使用jQuery计算#content div，减去.container widths，然后除以2得到左边距-most .container div。

.container {
    width:208px;
    float:left;
    padding:0;
    margin: 0 auto;
    text-align:center;
    background-color: #cccccc;
}
.container p {
    text-align:justify;
    padding: 20px 10px 20px 10px;
}

$(document).ready(function(){
    var w = $('#content').width();
    var calw = (parseInt(w) - (208*3))/2;
    $('#left').css('margin-left',calw+'px');
});

<div id="content">
    <div class="container" id="left">
        <h3>COLLECTIONS</h3>
        <p>blahblah</p>
    </div>
    <div class="container">
        <h3>COLLECTIONS</h3>
        <p>blahblah</p>
    </div>
    <div class="container">
        <h3>COLLECTIONS</h3>
        <p>blahblah</p>
    </div>
</div>

修改考虑到固定宽度的208px div容器，我认为最简单的方法是使用一点jQuery：

$(document).ready(function(){ var w = $('#content').width(); var calw = (parseInt(w) - (208*3))/2; $('#left').css('margin-left',calw+'px'); });

这是一个jsfiddle来演示效果（用上面的内容更新）。

当然，在这一点上，你可能最好使用一个自动应用了margin的容器div，以及你拥有的3个contianer div的宽度。当然，这种方法会导致IE due to a bug中的问题：margin：auto被处理。

.container2 { width:208px; float:left; padding:0; margin: 0 auto; text-align:center; background-color: #cccccc; } .container2 p { text-align:justify; padding: 20px 10px 20px 10px; } #content2 { width: 624px; background-color: #ccccaa; margin: 0 auto; } <div id="content2"> <div class="container2"> <h3>COLLECTIONS</h3> <p>blahblah</p> </div> <div class="container2"> <h3>COLLECTIONS</h3> <p>blahblah</p> </div> <div class="container2"> <h3>COLLECTIONS</h3> <p>blahblah</p> </div> <br style="clear: both;"/> </div>

显示both。

Answer 2

如果我理解正确，你试图将3 divs类容器置于div id内容中。容器div的宽度决定了3个嵌套div的间距，如果你想让它们靠得更近，只需调整容器div的宽度即可。如果您的容器div恰好是固定宽度，请使用填充来推送内部的内容。

Answer 3

使用它：

#content {
    width: 684px;
    margin:0 auto;
}

#nav_one, #nav_two, #nav_three {
    width: 208px;
    float: right;
    padding: 20px 10px;
    text-align: center;
}

Answer 4

在你的CSS中使用固定宽度测量通常是一个坏主意。使用百分比设置宽度测量值，然后使用最小宽度和最大宽度的px测量值限制它们。这将允许最大的便携性到各种屏幕尺寸基本上你正在做的是微观管理。通过使用百分比，您可以让浏览器更轻松地呈现您的内容。

Answer 5

来自@ gollum18的最新评论，所以这里的答案比上述所有答案都要好。

HTML

<section>
    <div class="third center-align"></div>
    <div class="third center-align"></div>
    <div class="third center-align"></div>
</section>

CSS

section {
    text-align: center;
}
    .third {
        width: 33.333%;
        width: -webkit-calc(100% / 3);
        width: -moz-calc(100% / 3);
        width: calc(100% / 3);
    }
    .center-align {
        display: inline-block;
        text-align: left;
    }

中心将三个div与CSS并排排列

5 个答案: