Cách tạo một div trống chiếm không gian

Đây là trường hợp hệ thống lưới 960 của tôi:

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

Đây là tập hợp các div của tôi, được sử dụng làm cấu trúc bảng.

CSS cho biết như sau:

.kundregister_grid_1 {
    display: inline-block;
    float: left;
    margin: 0; 
    text-align: center;
}
.kundregister_grid_1 {
    width: 140px;
}

Đừng bận tâm đến cái tên Thụy Điển. Tôi muốn các div hiển thị ngay cả khi chúng không có giá trị.

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

Như vậy, trong trường hợp này không có 'Namn' và 'Avn.Namn' trong hai cột. Tuy nhiên, khi chạy điều này trong chrome, chúng bị xóa và không còn đẩy các div khác theo thứ tự float:left. Vì vậy, nếu tôi có các danh mục trong cùng div ở trên, thì các giá trị sẽ được đặt dưới danh mục sai.

nó hoạt động nếu bạn loại bỏ trôi nổi. http://jsbin.com/izoca/2/edit

với float nó chỉ hoạt động nếu có một số nội dung, ví dụ:  

Hãy thử thêm  vào các mục trống.

Tôi không hiểu tại sao bạn không sử dụng <table>ở đây? Họ sẽ tự động làm những việc này.

Cập nhật nhẹ cho câu trả lời @ no1cobla. Điều này ẩn khoảng thời gian. Giải pháp này hoạt động trong IE8 +.

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

Một giải pháp đơn giản cho các div di động trống là thêm:

• chiều rộng (hoặc chiều rộng tối thiểu)
• chiều cao tối thiểu

bằng cách này, bạn có thể giữ chức năng float và buộc nó lấp đầy không gian khi trống.

Tôi sử dụng kỹ thuật này trong các cột bố cục trang, để giữ mọi cột ở vị trí của nó ngay cả khi các cột khác trống.

Thí dụ:

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

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

Chỉ cần thêm một ký tự khoảng trắng chiều rộng bằng không bên trong một phần tử giả

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

Đây là một cách:

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

Bạn có thể:

o Đặt .kundregister_grid_1thành:

• width(hoặc width-min) với height(hoặc min-height)
• hoặc là padding-top
• hoặc là padding-bottom
• hoặc là border-top
• hoặc là border-bottom

o Hoặc sử dụng phần tử giả : ::beforehoặc ::aftervới:

• {content: "\200B";}
• hoặc {content: "."; visibility: hidden;}.

o Hoặc đặt  bên trong phần tử trống, nhưng điều này đôi khi có thể mang lại hiệu quả bất ngờ, vd. kết hợp vớitext-decoration: underline;

Tại sao không chỉ thêm "min-width" vào lớp css của bạn?

  hoạt động nhưng đó không phải là cách đúng, tôi nghĩ rằng w min-height: 1px;

Với việc sử dụng khối nội tuyến, nó sẽ hoạt động như một đối tượng nội tuyến. vì vậy không cần phao để đặt chúng cạnh nhau trên một dòng. Và thực sự như Rito đã nói, phao cần một "cơ thể", giống như chúng cần kích thước.

Tôi hoàn toàn đồng ý với Pekka về việc sử dụng bảng. Tất cả những người xây dựng bố cục bằng cách sử dụng bảng tránh của div đều giống như đó là một sự chán nản. Nhưng hãy sử dụng chúng cho dữ liệu dạng bảng! Đó là những gì họ đề cập đến. Và trong trường hợp của bạn, tôi nghĩ bạn cần chúng :)

NHƯNG nếu bạn thực sự thực sự muốn những gì bạn muốn. Có một cách hack css. Giống như bản hack float.

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

Thêm cái đó và bạn cũng được thiết lập: D (Lưu ý: không hoạt động trong IE, nhưng có thể sửa được)

Nếu chúng cần được làm nổi, bạn luôn có thể đặt chiều cao tối thiểu là 1px để chúng không bị sụp đổ.

Trong việc xây dựng một bộ thẻ bố cục tùy chỉnh, tôi đã tìm thấy một câu trả lời khác cho vấn đề này. Được cung cấp ở đây là bộ thẻ tùy chỉnh và các lớp CSS của chúng.

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 }

Chìa khóa ở đây là kích thước hộp và đệm.