Как сделать так, чтобы пустой 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 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. Поэтому, если у меня есть категории в тех же блоках выше, значения будут помещены в неправильную категорию.

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

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

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

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

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

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

Простое решение для пустых плавающих div - это добавить:

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

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

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

Пример:

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

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

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

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

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

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

Ты можешь:

o Установите .kundregister_grid_1на:

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

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

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

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

Почему бы просто не добавить «минимальную ширину» к вашему CSS-классу?

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

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

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

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

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

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

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

Создавая собственный набор тегов макета, я нашел другой ответ на эту проблему. Здесь предоставляется настраиваемый набор тегов и их классы CSS.

HTML

<layout-table>
   <layout-header> 
       <layout-column> 1 a</layout-column>
       <layout-column>  </layout-column>
       <layout-column> 3 </layout-column>
       <layout-column> 4 </layout-column>
   </layout-header>

   <layout-row> 
       <layout-column> a </layout-column>
       <layout-column> a 1</layout-column>
       <layout-column> a </layout-column>
       <layout-column> a </layout-column>
   </layout-row>

   <layout-footer> 
       <layout-column> 1 </layout-column>
       <layout-column>  </layout-column>
       <layout-column> 3 b</layout-column>
       <layout-column> 4 </layout-column>
   </layout-footer>
</layout-table>

CSS

layout-table
{
    display : table;
    clear : both;
    table-layout : fixed;
    width : 100%;
}

layout-table:unresolved
{
    color : red;
    border: 1px blue solid;
    empty-cells : show;
}

layout-header, layout-footer, layout-row 
{
    display : table-row;
    clear : both;   
    empty-cells : show;
    width : 100%;
}

layout-column 
{ 
    display : table-column;
    float : left;
    width : 25%;
    min-width : 25%;
    empty-cells : show;
    box-sizing: border-box;
    /* border: 1px solid white; */
    padding : 1px 1px 1px 1px;
}

layout-row:nth-child(even)
{ 
    background-color : lightblue;
}

layout-row:hover 
{ background-color: #f5f5f5 }

Ключевым моментом здесь является размер и заполнение блока.