Як зробити порожній дів займає місце

Це мій корпус системи 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>

Це мій набір дівок, використовуваний як структура таблиці.

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". Однак, виконуючи це в хромі, вони видаляються та більше не натискають інші діви в порядку float:left. Тож якщо я маю категорії в тих самих дівах вище, то значення будуть розміщені під неправильною категорією.

він працює, якщо ви видалите плаваючий. http://jsbin.com/izoca/2/edit

з floats він працює лише у тому випадку, якщо є якийсь вміст, наприклад  

Спробуйте додати  до порожніх елементів.

Я не розумію, чому ти тут не використовуєш <table>? Вони будуть робити такі речі автоматично.

Трохи оновіть відповідь @ no1cobla. Це приховує період. Це рішення працює в IE8 +.

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

Просте рішення для порожніх плаваючих div - додати:

• ширина (або мінімальна ширина)
• мінімальна висота

таким чином ви можете зберегти функціональність поплавця і змусити його заповнювати простір, коли порожній.

Я використовую цю техніку в стовпчиках макета сторінки, щоб зберігати кожен стовпчик у своєму положенні, навіть якщо інші стовпці порожні.

Приклад:

.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;

Чому б просто не додати "min-width" до свого css-класу?

  працює, але це не так, я думаю, що w min-висота: 1px;

За допомогою вбудованого блоку він поводитиметься як вбудований об'єкт. тож жодним поплавцям не потрібно було їх дістати поруч з одним на одному рядку. І справді, як сказав Ріто, поплавці потребують «тіла», як і їм потрібні розміри.

Я повністю згоден з Пеккою щодо використання таблиць. Усі, хто створює макети, використовуючи таблиці уникання Div, на зразок хвороби. Але використовуйте їх для табличних даних! Ось для чого вони і ментовані. І у вашому випадку я думаю, що вони вам потрібні :)

АЛЕ якщо ти дуже хочеш того, чого хочеш. Існує спосіб злому css. Те саме, що і float hack.

.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 }

Ключовим тут є розмір коробки та прокладка.