Как заставить пустой div занимать место

Это мой случай системы сетки 960:

<div class="kundregister_grid_full">
    <div class="kundregister_grid_1">ID</div>
    <div class="kundregister_grid_1">Namn</div>
    <div class="kundregister_grid_1">Anv.Namn</div>
    <div class="kundregister_grid_1">Email</div>
    <div class="kundregister_grid_1">Roll</div>
    <div class="kundregister_grid_1">Aktiv</div>
</div>

Это мой набор элементов div, используемых в качестве структуры таблицы.

CSS говорит следующее:

.kundregister_grid_1 {
    display: inline-block;
    float: left;
    margin: 0; 
    text-align: center;
}
.kundregister_grid_1 {
    width: 140px;
}

Не обращайте внимания на шведский именования. Я хочу, чтобы элементы div отображались, даже если у них нет значений.

<div class="kundregister_grid_full">
 <div class="kundregister_grid_1">ID</div>
 <div class="kundregister_grid_1"></div>
 <div class="kundregister_grid_1"></div>
 <div class="kundregister_grid_1">Email</div>
 <div class="kundregister_grid_1">Roll</div>
 <div class="kundregister_grid_1">Aktiv</div>
</div>

Например, в этом случае в двух столбцах отсутствуют «Namn» и «Avn.Namn». Однако при запуске этого в Chrome они удаляются и больше не выдвигают другие элементы в порядке float: left . Так что, если у меня есть категории в тех же самых divs выше, то значения будут помещены в неправильную категорию.

94
задан Nayuki 22 March 2016 в 22:08
поделиться

3 ответа

работает, если убрать плавающий. http://jsbin.com/izoca/2/edit

с числами с плавающей запятой, он работает, только если есть некоторый контент, например

58
ответ дан 24 November 2019 в 06:06
поделиться

Попробуйте добавить к пустым элементам.

Я не понимаю, почему вы не используете здесь

? Они будут делать такие вещи автоматически.

53
ответ дан 24 November 2019 в 06:06
поделиться

При использовании встроенного блока он будет вести себя как встроенный объект. поэтому нет необходимости размещать их рядом друг с другом на одной строке. И действительно, как сказал Рито, поплавкам нужно «тело», как им нужны размеры.

Я полностью согласен с Пеккой насчет использования таблиц. Все, кто создает макеты с использованием div, избегают таблиц, как будто это болезнь. Но используйте их для табличных данных! Вот для чего они нужны. А в твоем случае, думаю, они тебе нужны :)

НО если ты действительно хочешь того, чего хочешь. Есть способ взлома css. То же, что и хак с плавающей запятой.

.kundregister_grid_1:after {  content: ".";  }

Добавьте его, и все готово: D (Примечание: не работает в IE, но это поправимо)

1
ответ дан 24 November 2019 в 06:06
поделиться