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

同様に、この場合、2つの列に「Namn」と「Avn.Namn」はありません。ただし、これをChromeで実行すると、それらは削除され、順序で他のdivをプッシュしなくなりfloat:leftます。したがって、上記の同じdivにカテゴリがある場合、値は間違ったカテゴリに配置されます。

フローティングを外せば動作します。http://jsbin.com/izoca/2/edit

フロートでは、いくつかのコンテンツがある場合にのみ機能します。  

 空のアイテムに追加してみてください。

なぜ<table>ここを使わないのか分かりませんか？彼らはこの種のものを自動的に行います。

@ no1coblaの回答を少し更新。これは期間を隠します。このソリューションはIE8 +で動作します。

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

空のフロート divの簡単な解決策は、以下を追加することです。

• 幅（または最小幅）
• 最小の高さ

このようにして、フロート機能を維持し、空の場合は強制的にスペースを埋めることができます。

私は、ページレイアウト列でこの手法を使用して、他の列が空であってもすべての列をその位置に保持します。

例：

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

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

疑似要素内に幅0のスペース文字を追加するだけです

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

これは1つの方法です。

.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クラスに「min-width」を追加しないのはなぜですか？

  動作しますが、これは正しい方法ではありません。wmin-height：1px;

インラインブロックを使用すると、インラインオブジェクトとして動作します。したがって、フロートを1行に並べて配置する必要はありません。実際、Ritoが言ったように、フロートには寸法が必要なように「本体」が必要です。

テーブルの使用について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 }

ここで重要なのは、ボックスのサイズとパディングです。