выровняйте пять разделов одинаково рядом друг с другом

Question

Мне даже сложно рассказать о моем правильном вопросе, так что медведь со мной здесь, пожалуйста.

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

Надеюсь, это имеет смысл. Это мой код:

CSS и HTML следующим образом

#content { 
 
    \t position: absolute; 
 
    \t width: 1000px; 
 
    \t height: 500px; 
 
    \t left: 50%; 
 
    \t top: 50%; 
 
    \t margin-left: -500px; 
 
    \t margin-top: -250px; 
 
    \t border: 2px solid #f9423a; 
 
    \t border-radius: 10px; 
 
    \t background-color: #3eb1c8; 
 
    \t overflow: hidden; 
 
    } 
 
    
 
    .bookmark { 
 
    \t display: inline-block; 
 
    \t width: 15%; 
 
    \t height: 20%; 
 
    \t margin-left: 2%; 
 
    \t margin-right: 2%; 
 
    \t margin-top: 2.5%; 
 
    \t border: 1px solid #f9423a; 
 
    \t border-radius: 10px; 
 
    \t background-color: #f9423a; 
 
    }

<div id="content"> 
 
    <div class="bookmark"></div> 
 
    <div class="bookmark"></div> 
 
    <div class="bookmark"></div> 
 
    <div class="bookmark"></div> 
 
    <div class="bookmark"></div> 
 
    <div class="bookmark"></div> 
 
    <div class="bookmark"></div> 
 
    <div class="bookmark"></div> 
 
    <div class="bookmark"></div> 
 
    <div class="bookmark"></div> 
 
    <div class="bookmark"></div> 
 
    <div class="bookmark"></div> 
 
    <div class="bookmark"></div> 
 
    <div class="bookmark"></div> 
 
    <div class="bookmark"></div> 
 
</div>

Заметьте, что я просто работаю с цветом заполнены дивы, чтобы увидеть, если он работает.

Как вы можете видеть, это почти работает, онлайн-то, что беспокоит меня, это то, что справа есть немного больше поля, чем слева. Я хотел бы иметь равные границы между сторонами и внешними элементами, и между внутренними элементами, конечно.

Я надеюсь, что кто-то поймет мой вопрос!

Answer 1

check this example, if this is what you wanted 

Здесь я удалил правый край и увеличивал закладку DIV с до 17%

.bookmark { 
    display: inline-block; 
    width: 17%; 
    height: 20%; 
    margin-left: 2%;  
    margin-top: 2.5%; 
    border: 1px solid #f9423a; 
    border-radius: 10px; 
    background-color: #f9423a; 
} 

https://jsfiddle.net/0gkfp7zr/

Answer 2

Это потому, что вы используете: display: inline-block, который читает пробел между вашими div на вашем HTML-коде как буквальное пустое пространство, например, помещает пробел между словами, что нарушает макет.

Попробуйте изменить синтаксис, как это:

<div>content</div><div> 
content2</div><div> 
content3</div><div> 
content4</div><div> 
content5</div> 

Тогда для CSS можно использовать известково(); чтобы добавить границы, что тоже испортило бы ваш макет. Как это:

div { 
    width: calc(20% - 4px);//20*5 = 100 - 2px on each side each time 
    border: 2px solid black; 
} 

JS Fiddle

body { 
 
    margin: 0 0 0 0; 
 
} 
 

 
div {  
 
    text-align: center; 
 
    display: inline-block; 
 
    width: calc(20% - 4px); 
 
    /*20*5 = 100 - 2px on each side each time*/ 
 
    border: 2px solid black; 
 
    background-color: red; 
 
}

<div>content1</div><div> 
 
content2</div><div> 
 
content3</div><div> 
 
content4</div><div> 
 
content5</div>

Answer 3

ответ Арамиле является хорошим и исправить правильно. Нет никакого «хорошего» способа справиться с этим. У разных людей разные методы, но все они немного хаки. То, как я предпочитаю делать это с комментариями следующим образом:

<div class="bookmark"></div><!-- 
--><div class="bookmark"></div><!-- 
--><div class="bookmark"></div><!-- 
--><div class="bookmark"></div><!-- 
--><div class="bookmark"></div> 

В принципе вы не хотите белое пространства между одной закрывающей DIV и следующим открытием делами. Иногда, если мой контент достаточно короток, я положу их все вместе на одну строку, как вы видите ниже, но это значительно усложняет чтение.

<div class="bookmark"></div><div class="bookmark"></div><div class="bookmark"></div><div class="bookmark"></div><div class="bookmark"></div> 

Answer 4

добавить это .bookmark

поплавок: левый и добавление.8 по ширине закладки, ваши вычисления не равны, потому что в 1 закладке div у вас 15% плюс маржа слева и справа, что составляет 4%, всего 1 div - 19 x 5 = 95, поэтому я добавил .8 для заполнения оставшиеся пробелы. 19,8 x 5 = 99

.bookmark { 
    display: inline-block; 
    width: 15.8%; 
    height: 20%; 
    margin-left: 2%; 
    margin-right: 2%; 
    margin-top: 2.5%; 
    border: 1px solid #f9423a; 
    border-radius: 10px; 
    background-color: #f9423a; 
    float: left; 
}