中心將三個div與CSS並排排列

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中的問題， 因為保證金方式存在錯誤 ：自動處理。

.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>

顯示兩者 。

Answer 2

用這個：

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

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

Answer 3

在你的CSS中使用固定寬度測量通常是個壞主意。 使用百分比設置寬度測量值，然后使用最小寬度和最大寬度的px測量值限制它們。 這將允許最大的便攜性到各種屏幕尺寸。
基本上你正在做的是微觀管理。 通過使用百分比，您可以讓瀏覽器更輕松地呈現您的內容。

Answer 4

來自@ 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;
    }

Answer 5

如果我理解正確，你試圖將3 divs類容器集中在div id內容中。 容器div的寬度決定了3個嵌套div的間距，如果你想讓它們靠得更近，只需調整容器div的寬度即可。 如果您的容器div恰好是固定寬度，請使用填充來推送內部內容。