Как сделать пустой div занять место

Это мой случай 960 grid system:

<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.НАМН ' в двух колонках. Однако при запуске этого в chrome они удаляются и больше не нажимают на другие дивы в порядке float:left. Так что если У меня есть категории в тех же divs выше, тогда значения будут помещены в неправильную категорию.

12 81
html css

12 ответов:

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

с поплавками он работает только в том случае, если есть какой-то контент, например &nbsp;

50

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

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

45

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

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

простое решение для пустых сплавлялись divs должен добавить:

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

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

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

пример:

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

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

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

.class:after {
    content: '0b';
}
10

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

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

работает, но это не правильный путь Я думаю, что ж мин-высота: 1 пиксель;

2

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

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

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

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

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

1

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

1

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

1

вы можете:

значение .kundregister_grid_1:

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

или использовать псевдо-элементами:::before или ::after С:

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

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

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 }

ключ здесь коробка-Загрунтовка и прокладка.

0