по центру выровняйте три деления рядом с CSS

Question

У меня есть три div s бок о бок в контейнере, который устанавливает себя в ширину окна пользователя.

Я хочу, чтобы они оставались вложенными друг относительно друга и центрировались какединица измерения в динамическом контейнере.
Я хотел бы сделать это без , помещая их в другой 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 требует 208 пикселей.Я не думаю, что margin: auto будет здесь для центрирования всех трех в группе, поэтому я предлагаю float: left и использовать jQuery для вычисления #content div, вычитания ширины .container и деления на два, чтобы получить левое поле слева.-st. .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>

EDIT Чтобы учесть контейнеры div с фиксированной шириной 208px, я думаю, что самый простой способ сделать это - использовать немногоjQuery:

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

Вот jsfiddle , чтобы продемонстрировать эффект (обновлено с помощью вышеупомянутого).

Конечно, на этом этапе вы, возможно, очень хорошо будетеВы можете использовать контейнерный div с примененным к нему полем auto и шириной 3-х contianer div'ов, которые у вас есть.Конечно, этот подход вызывает проблемы в IE из-за ошибки в способе 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>

Отображение обоих .

Answer 2

Недавний комментарий от @ 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 3

Обычно плохая идея использовать фиксированные измерения ширины в вашем CSS. Установите ваши измерения ширины в процентах, а затем ограничьте их, используя измерения px с минимальной шириной и максимальной шириной. Это позволит максимально переносить экран различных размеров.
В основном то, что вы делаете, это микроуправление. Используя вместо этого проценты, вы позволяете браузеру более легко отображать ваш контент.

Answer 4

используйте это:

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

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

Answer 5

Если я правильно понимаю, вы пытаетесь центрировать контейнер класса 3 divs внутри содержимого div id. Ширина вашего контейнера div определяет расстояние между вашими 3 вложенными div, если вы хотите, чтобы они были ближе друг к другу, просто отрегулируйте ширину контейнера контейнера. Если ваш контейнерный div имеет фиксированную ширину, используйте отступы для перемещения содержимого внутрь.