Поля элемента игнорируются после плавающего элемента
Вопрос
У меня есть "очищенный" <hr>
отметьте с полями сверху и снизу.Однако после двух плавающих элементов в виде столбцов верхнее поле игнорируется, и строка располагается прямо под текстом.
CSS - файл:
hr {
width: 100%;
height: 1px;
border: 1px;
background-color: #d3d7cf;
color: #d3d7cf;
clear: both;
margin: 16px auto;
}
.column {
text-align: center;
float: left;
margin-right: 16px;
width: 200px
}
HTML:
<hr/>
<div class="column">asd<br />fgh</div>
<div class="column">asd</div>
<hr/>
Я обнаружил, что я могу обернуть столбцы в div с overflow: hidden
, но есть ли решение, при котором мне не нужно добавлять дополнительную разметку в HTML?
Решение
Добавить поле-снизу:16 пикселей для класса "столбец".
Или добавьте отступы к столбцам (очевидно, нет, если вы используете границы для класса column).
Другие советы
Добавить float:left
к тому HR
Стиль.
Теперь это должно привести к HR
играйте в том же потоке , что и плавающий DIV
s и примените верхнее поле, которого вам не хватало в первой версии вашего CSS.