Как сделать так, чтобы пустой div занимал место

Question

Это мой случай системы сетки 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 они удаляются и больше не выдвигают другие div в порядке float:left. Так что если у меня есть категории в тех же самых divs выше, то значения будут помещены в неправильную категорию.

Answer 1

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

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

Answer 2

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

Я не понимаю, почему вы здесь не используете <table>? Они будут делать такие вещи автоматически.

Answer 3

Небольшое обновление до ответа @ no1cobla. Это скрывает период. Это решение работает в IE8 +.

.class:after
{
    content: '.';
    visibility: hidden;
}

Answer 4

Простое решение для пустых floated divs заключается в добавлении:

• ширина (или минимальная ширина)
• минимальная высота

таким образом вы можете сохранить функцию float и заставить ее заполнять пространство, когда она пуста.

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

Пример:

.left-column
{
   width: 200px;
   min-height: 1px;
   float: left;
}

.right-column
{
    width: 500px;
    min-height: 1px;
    float: left;
}

Answer 5

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

.class:after {
    content: '\200b';
}

Answer 6

Это один из способов:

.your-selector:empty::after {
    content: ".";
    visibility: hidden;
}

Answer 7

работает, но это не правильно, я думаю, что w min-height: 1px;

Answer 8

Вы можете:

Установить на .kundregister_grid_1:

• width (или width-min) с height (или min-height)
• или padding-top
• или padding-bottom
• или border-top
• или border-bottom

Или используйте псевдоэлементы : ::before или ::after с:

• {content: "\200B";}
• или {content: "."; visibility: hidden;}.

или поставить  внутри пустого элемента, но иногда это может привести к неожиданным эффектам, например.в комбинации с text-decoration: underline;

Answer 9

Если их нужно плавать, вы всегда можете просто установить минимальную высоту в 1 пиксель, чтобы они не свалились.

Answer 10

Почему бы просто не добавить "min-width" в ваш css-класс?