빈 div가 공간을 차지하도록 만드는 방법

빈 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;
}

---

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

---

With using the inline-block it will behave as an inline object. so no floats needed to get them next to eachother on one line. And indeed as Rito said, floats need a "body", like they need dimensions.

I totally agree with Pekka about using tables. Everybody that build layouts using div's avoid tables like it's a desease. But use them for tablular data! That's what they're ment for. And in your case i think you need them :)

BUT if you really really want what you want. There is a css hack way. Same as the float hack.

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

Add that one and you're also set :D (Note: does not work in IE, but that is fixable)

---

Why not just add "min-width" to your css-class?

---

If they need to be floated, you could always just set the min-height to 1px so they don't collapse.

---

You can:

Set to .kundregister_grid_1:

• width(or width-min) with height (or min-height)
• or padding-top
• or padding-bottom
• or border-top
• or border-bottom

Or use pseudo-elements: ::before or ::after with:

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

Or put   inside empty element, but this sometimes can bring unexpected effects eg. in combination with text-decoration: underline;

---

In building a custom set of layout tags, I found another answer to this problem. Provided here is the custom set of tags and their CSS classes.

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 }

The key here is the Box-Sizing and Padding.

참고URL : https://stackoverflow.com/questions/3416454/how-to-make-an-empty-div-take-space