วิธีทำให้ 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;
}

อย่ารังเกียจการตั้งชื่อภาษาสวีเดน ฉันต้องการให้ 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อีกต่อไป ดังนั้นหากฉันมีหมวดหมู่ใน div เดียวกันด้านบนค่าจะถูกวางไว้ในหมวดหมู่ที่ไม่ถูกต้อง

ใช้งานได้ถ้าคุณลบลอย http://jsbin.com/izoca/2/edit

ด้วยการลอยจะใช้งานได้เฉพาะเมื่อมีเนื้อหาบางอย่างเช่น  

ลองเพิ่ม ในรายการที่ว่างเปล่า

ฉันไม่เข้าใจว่าทำไมคุณไม่ใช้<table>ที่นี่ล่ะ? พวกเขาจะทำสิ่งนี้โดยอัตโนมัติ

อัปเดตเล็กน้อยสำหรับคำตอบ @ no1cobla สิ่งนี้จะซ่อนช่วงเวลา โซลูชันนี้ใช้ได้กับ IE8 +

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

วิธีการแก้ปัญหาที่ง่ายสำหรับว่างลอย divs คือการเพิ่ม:

• ความกว้าง (หรือความกว้างต่ำสุด)
• ความสูงต่ำสุด

ด้วยวิธีนี้คุณสามารถใช้ฟังก์ชันลอยและบังคับให้เติมช่องว่างเมื่อว่างเปล่า

ฉันใช้เทคนิคนี้ในคอลัมน์เค้าโครงหน้าเพื่อให้ทุกคอลัมน์อยู่ในตำแหน่งแม้ว่าคอลัมน์อื่นจะว่างเปล่าก็ตาม

ตัวอย่าง:

.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-class ของคุณล่ะ

  ใช้งานได้ แต่ไม่ถูกต้องฉันคิดว่า w min-height: 1px;

ด้วยการใช้อินไลน์บล็อกมันจะทำงานเป็นวัตถุแบบอินไลน์ จึงไม่จำเป็นต้องมีลอยเพื่อให้ติดกันในบรรทัดเดียว และตามที่ริโตะกล่าวไว้การลอยตัวนั้นต้องการ "ร่างกาย" เช่นเดียวกับที่พวกมันต้องการมิติ

ฉันเห็นด้วยอย่างยิ่งกับ Pekka เกี่ยวกับการใช้ตาราง ทุกคนที่สร้างเลย์เอาต์โดยใช้ตารางหลีกเลี่ยงของ div เหมือนกับว่ามันเป็นสิ่งที่น่ารังเกียจ แต่ใช้สำหรับข้อมูลแบบตาราง! นั่นคือสิ่งที่พวกเขากล่าวถึง และในกรณีของคุณฉันคิดว่าคุณต้องการ :)

แต่ถ้าคุณต้องการสิ่งที่คุณต้องการจริงๆ มีวิธีแฮ็ค css เช่นเดียวกับการแฮ็กแบบลอย

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

เพิ่มอันนั้นและคุณก็ตั้งค่า: D (หมายเหตุ: ใช้ไม่ได้ใน IE แต่สามารถแก้ไขได้)

หากจำเป็นต้องลอยคุณสามารถตั้งค่า min-height เป็น 1px เพื่อไม่ให้ยุบได้

ในการสร้างชุดแท็กเค้าโครงที่กำหนดเองฉันพบคำตอบอื่นสำหรับปัญหานี้ มีให้ที่นี่คือชุดแท็กที่กำหนดเองและคลาส 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 }

กุญแจสำคัญที่นี่คือขนาดกล่องและช่องว่างภายใน