Блог

Главная - Вопросы по программированию - Получить 3 раздела с запасом в одной строке

Получить 3 раздела с запасом в одной строке

#html #css #margin

#HTML #css #запас

Вопрос:

Я пытаюсь получить 3 раздела рядом друг с другом. Они должны заполнить пространство размером 980 пикселей, но у левого и правого разделов может не быть поля снаружи.

Как мне это исправить?

Комментарии:

1. Насколько велики разрешенные поля … потому что это важно.

2. я получил 3 раздела шириной 310 пикселей, и только у второго раздела должно быть поле 25 пикселей слева и 25 пикселей справа.

3. Вы медленно предоставляете нам больше деталей о том, что вы пытаетесь сделать. ПОЖАЛУЙСТА, найдите время, чтобы написать еще несколько деталей и опубликовать HTML.

4. @user3652488: Вот решение, которое можно использовать, если у вас 6, 9 или более разделов в контейнере. Единственное отличие от решения, которое я представил, заключается в использовании :nth-of-type селектора с «формулой». В остальном подход точно такой же: jsfiddle.net/JQD3U . Приветствия.

Ответ №1:

Используйте :first-child и :last-child , чтобы установить поля равными нулю.

Предполагая, что ваши столбцы имеют класс column , вы можете использовать следующий CSS-код

 .column:first-child { margin-left: 0; }
.column:last-child { margin-right: 0; }

jsFiddle

Комментарии:

1. Я вижу, но я извлекаю данные из своей базы данных. Таким образом, я получу примерно 30 разделов, 10 строк с 3 разделами рядом друг с другом..

2. Поместите каждые 3 раздела в отдельный контейнер строк. Строки должны располагаться друг над другом и занимать 100% ширины.

Ответ №2:

Вот решение, которое не использует поля: http://jsfiddle.net/c33eM /.

HTML:

 <div class = "container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

CSS:

 .container {
    width: 980px;
    outline: 1px solid red;
    display: table;
    text-align: center;
}

.container > div {
    width: 310px;
    background-color: #ccc;
    height: 100px;
    line-height: 100px;
    text-align: center;
    border: 1px solid #aaa;
    box-sizing: border-box;
}

.container > div:first-of-type {
    float: left;
}

.container > div:nth-of-type(2) {
    display: inline-block;
}

.container > div:last-of-type {
    float: right;
}

Комментарии:

1. За исключением того, что это работает только с 3 внутренними разделениями … добавьте еще три (как прокомментировал OP), и это сломается.

2. В вопросе указан контейнер размером 980 пикселей, а в комментариях к вопросу упоминаются три внутренних раздела размером 310 пикселей каждый. Это требования, с которыми я работал. Если OP хочет добавить больше разделов, то это легко решается просто с помощью селектора n-го типа и с использованием «формулы». Вот так, гений: jsfiddle.net/JQD3U .

Ответ №3:

Демонстрация JSfiddle

CSS

 .container {
    width:980px;
    background-color: pink;
    overflow: hidden;
}

.box {
    width:310px;
    margin-right:25px;
    float:left;
    height:75px;
    background-color: #663399;
    margin-bottom: 10px;
}

.container div:nth-child(3n) { 
   /* removes margin-right from every 3rd div */
    margin-right:0;
}