#css #layout #width
#css #макет #ширина
Вопрос:
Спасибо, что прочитали это
У меня странная проблема с макетами. Я использовал сброс CSS Мейера. У меня есть div, содержащий 3 раздела следующим образом. Я еще не добавил никакого контента.
<div id="container">
<div class="gallery"></div>
<div class="gallery"></div>
<div class="gallery"></div>
</div>
Применяются следующие стили
#container{
width: 954px;
}
.gallery {
display: inline-block;
width: 270px;
margin: 24px;
}
Итак, на мой взгляд, каждая галерея имеет ширину 24px 270px 24px = 318px. Таким образом, общая ширина 3 разделов галереи равна 318px * 3 = 954px.
Однако divs будут отображаться только в одной строке, когда я увеличу ширину #container до 960 пикселей.
Откуда берутся 6 загадочных пикселей? Я дважды проверил, что все остальные значения границ, отступов и отступов равны 0. Я даже установил outline равным 0px, хотя это не должно иметь эффекта в любом случае.
Ответ №1:
Для внутренних разделов установлено значение display: inline-block;
. Это означает, что любой пробел между ними приведет к добавлению одного пробела между ними в макете.
Вариант 1
Хотя это и неприятное решение, вы не увидите дополнительного пространства, если сделаете это.
<div id="container">
<div class="gallery"></div><!--
--><div class="gallery"></div><!--
--><div class="gallery"></div>
</div>
Вариант 2
Другим решением, которое неприятно по разным причинам, является установка font-size: 0;
на #container
. Если вы хотите, чтобы внутри был текст, вам нужно будет установить для font-size
элементов внутри значение в пикселях.
#container{
width: 954px;
font-size: 0;
}
.gallery {
display: inline-block;
width: 270px;
margin: 24px;
}
Вариант 3
Однако самым чистым решением, вероятно, было бы переместить внутренние разделы влево и очистить оболочку.
#container{
width: 954px;
}
#container:after {
content: "";
display: table;
clear: both;
}
.gallery {
display: inline-block;
width: 270px;
margin: 24px;
float: left;
}
Комментарии:
1. Потрясающе. Большое спасибо. Я бы никогда не подумал о пробелах. В этом случае я собираюсь использовать <!— —>
Ответ №2:
Вы пытались «закрыть» пробел?
Комментарии:
1. Это исправляет символы. Я никогда не знал, что существует атрибут пробела. Однако это не помогает мне понять причину. Все равно спасибо, хотя