Поля элемента игнорируются после плавающего элемента

StackOverflow https://stackoverflow.com/questions/1413897

  •  06-07-2019
  •  | 
  •  

Вопрос

У меня есть "очищенный" <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 играйте в том же потоке , что и плавающий DIVs и примените верхнее поле, которого вам не хватало в первой версии вашего CSS.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top