빈 div가 공간을 차지하도록 만드는 방법 <div class=”kundregister_grid_1″>Anv.Namn</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

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

답변

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

그래도 왜 <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 또는 &nbsp;빈 요소 안에 넣으십시오 . 그러나 이것은 때때로 예기치 않은 효과를 가져올 수 있습니다. 함께text-decoration: underline;