빈 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'이 없습니다. 그러나 이것을 크롬에서 실행할 때 제거되고 더 이상 다른 div를 순서대로 푸시하지 않습니다 float:left. 따라서 위의 동일한 div에 카테고리가 있으면 값이 잘못된 카테고리에 배치됩니다.

플로팅을 제거하면 작동합니다. http://jsbin.com/izoca/2/edit

예를 들어 일부 콘텐츠가있는 경우에만 작동합니다.  

 빈 항목에 추가해보십시오 .

그래도 왜 <table>여기를 사용하지 않는지 이해할 수 없습니까? 그들은 이런 종류의 일을 자동으로 할 것입니다.

@ no1cobla 답변에 대한 약간의 업데이트. 이것은 기간을 숨 깁니다. 이 솔루션은 IE8 +에서 작동합니다.

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

빈 부동 div에 대한 간단한 해결책 은 다음을 추가하는 것입니다.

• 너비 (또는 최소 너비)
• 최소 높이

이렇게하면 float 기능을 유지하고 비어있을 때 강제로 공간을 채울 수 있습니다.

페이지 레이아웃 열에서이 기술을 사용하여 다른 열이 비어 있어도 모든 열을 해당 위치에 유지합니다.

예:

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

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

의사 요소 안에 너비가 0 인 공백 문자를 추가하기 만하면됩니다.

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

CSS 클래스에 "최소 너비"를 추가하지 않는 이유는 무엇입니까?

  작동하지만 올바른 방법이 아닙니다. w min-height : 1px;

인라인 블록을 사용하면 인라인 객체로 작동합니다. 그래서 한 줄에서 서로 옆에 두는 데 수레가 필요하지 않습니다. 그리고 실제로 Rito가 말했듯이 수레는 치수가 필요한 것처럼 "몸체"가 필요합니다.

나는 테이블 사용에 대해 Pekka와 전적으로 동의합니다. div의 회피 테이블을 사용하여 레이아웃을 구축하는 모든 사람은 마치 끔찍한 일입니다. 그러나 표 형식 데이터에 사용하십시오! 그것이 그들이 원하는 것입니다. 그리고 귀하의 경우에는 당신이 필요하다고 생각합니다 :)

하지만 정말로 원하는 것을 원한다면. CSS 해킹 방법이 있습니다. 플로트 해킹과 동일합니다.

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

그 하나를 추가하면 다음도 설정됩니다. : D (참고 : IE에서는 작동하지 않지만 수정 가능)

플로팅해야하는 경우 항상 최소 높이를 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 }

여기서 핵심은 상자 크기 및 패딩입니다.