Как сделать так, чтобы пустой 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

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

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

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

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

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

Answer 2

При создании пользовательского набора тегов макета я нашел другой ответ на эту проблему.Здесь представлен пользовательский набор тегов и их 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 }

Ключевым моментом здесь является Box-Sizing and Padding.