Как сделать пустой 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;
}

Не против шведского названия. Я хочу, чтобы divs отображались, даже если у них нет значений.

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

Ответы

Ответ 1

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

с поплавками он работает только в том случае, если имеется некоторое содержимое, например. &nbsp;

Ответ 2

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

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

Ответ 3

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

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

Ответ 4

Простое решение для пустых плавающих divs состоит в том, чтобы добавить:

  • width (или min-width)
  • min-height

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

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

Пример:

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

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

Ответ 5

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

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

Ответ 6

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

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

Ответ 7

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

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

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

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

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

Ответ 8

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

Ответ 9

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

Ответ 10

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

Ответ 11

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

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

Ответ 12

Вы можете:

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

  • width (или width-min) с помощью height (или min-height)
  • или padding-top
  • или padding-bottom
  • или border-top
  • или border-bottom

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

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

Или поместите &nbsp; внутри пустого элемента, но иногда это может привести к неожиданным последствиям, например. в сочетании с text-decoration: underline;