5 элементов одинакового размера, на одной строке, с полями

#html

#HTML

Вопрос:

У меня проблема, и я не могу найти правильные ключевые слова в Google.. Но это кажется довольно «классическим». У меня есть веб-страница, скажем, с максимальной шириной 1500 пикселей; Я хочу добавить строку с 5 «блоками» (div) одинакового размера в каждом, разделенными полем.

Итак, я установил ширину 20% и правое поле 10 пикселей. Моя проблема в том, что мой последний div всегда переходит на следующую строку из-за поля. (Потому что с полями ширина моей строки больше, чем максимальная ширина страницы). Если я удалю поля, все поля будут правильно расположены в одной строке.

Что я должен сделать, чтобы это заработало? (За исключением использования внешней ширины jQuery, это мой следующий шаг, если я не могу сделать это легко с помощью css)

Вот мой код, который у меня есть сейчас :

 <div id="page">
    <div id="numbers">
        <div class="numberwrap">
        <div class="number">
            Number
        </div></div>
             <div class="numberwrap">
        <div class="number">
            Number
        </div></div>
                  <div class="numberwrap">
        <div class="number">
            Number
        </div></div>
                       <div class="numberwrap">
        <div class="number">
            Number
        </div></div>
                            <div class="numberwrap">
        <div class="number">
            Number
        </div></div>
    </div>
</div>

#page
{
    max-size: 500px;
    background-color:grey;
}

.number
{
    background-color:white;
}

.numberwrap
{
    float:left;
    width:20%;
   padding-right:10px;
}

Я также сделал скрипку, чтобы протестировать: http://jsfiddle.net/jKMp5 /

Спасибо!

Решение: мне просто нужно установить свойство padding для .number, а не для оболочки! Или используйте размер поля! Спасибо всем

1. У вас их padding нет margin .

2. Вы можете попробовать это: width:19%; padding-right:1%; в вашем .numberwrap классе css.

3. Алек: Да, я пробовал с заполнением и полями, и проблема была та же. (вот почему я смешиваю отступы и поля здесь). Подумайте иначе: я делал что-то подобное, чтобы обойти мою проблему, но это не очень «точно», и когда ширина перемещается, возникают проблемы…

Ответ №1:

Div с процентом ширины добавляет к этому ширину полей и отступов.

Имеется в виду div с шириной 50% amd margin-right: 20px; будет 50% 20px.

Вы можете сделать следующее.

 <div style="width: 20%;">
   <div style="margin-right: 20px;"></div>
</div>

Это все уладит.

или просто следующий

 .number
{
    background-color:white;
    padding-right:10px;
}

.numberwrap
{
   float:left;
   width:20%;
}

Ответ №2:

Проблема в том (как вы уже сказали), что margin влияет на каждый, div делая его больше, чем это 20% , поэтому одним из решений может быть указание этому div, что поле включено в общее количество width с помощью свойства box-sizing

Поэтому добавьте:

 .numberwrap {
    box-sizing: border-box;
}

Смотрите пример jsFiddle:http://jsfiddle.net/jKMp5/2 /

Ответ №3:

В бокс-модальном формате по умолчанию,

Область заполнения расширяет область содержимого за счет пустой области между содержимым и конечными границами, окружающими его.

Вы можете изменить это поведение с помощью свойства box-sizing, применив box-sizing:border-box

border-box:

Свойства width и height включают отступы и границу, но не поле.

 .numberwrap
    {
     box-sizing:border-box;
     /*other styles*/
    }

ДЕМОНСТРАЦИЯ

Ответ №4:

Вы можете использовать disaply:table и display:table-cell :

css

 #page
{
    max-size: 500px;
    background-color:grey;
}

.number
{
    background-color:white;
}

.numberwrap
{
    float:left;
    width:20%;
    padding-right:10px;
    display:table-cell;
    /*border: 1px solid black;*/
}
#numbers{
    display:table;
}

скрипка