HTMLの空のグリッド列、CSS

Question

row1私は4列あり、row2私は2列目を空にしてスペースを取ってください。 3列目が左に移動して2列目を占めます。私はテーブルと&nbspを使用したくない。

.col { 
 
    display: inline-block; 
 
    margin-right: 4%; 
 
    float: left; 
 
} 
 

 
.col:last-child { 
 
    margin-right: 0; 
 
} 
 

 
.col3 { 
 
    width: 21.98%; 
 
}

<div class="row1"> 
 
    <div class="col col3">Lorem</div> 
 
    <div class="col col3">Lorem</div> 
 
    <div class="col col3">Lorem</div> 
 
    <div class="col col3">Lorem</div> 
 
</div> 
 
<div class="row2"> 
 
    <div class="col col3">Lorem</div> 
 
    <div class="col col3"></div> 
 
    <div class="col col3">Lorem</div> 
 
    <div class="col col3">Lorem</div> 
 
</div>

Answer 1

あなたはオフセットを設定することができますが、あなたはまだあなたにDOMをその空のCOLをしたい場合、あなたは空のスペース を挿入することにより、簡単なハックを行うことができます。

空のスペースハックを使用しない場合は、3番目の列に割り当てられたブートストラップのクラスcol-md-offset-3を使用できます。ここで

.col { 
 
    display: inline-block; 
 
    margin-right: 4%; 
 
    float: left; 
 
} 
 

 
.col:last-child { 
 
    margin-right: 0; 
 
} 
 

 
.col3 { 
 
    width: 21.98%; 
 
}

<div class="row1"> 
 
    <div class="col col3">Lorem</div> 
 
    <div class="col col3">Lorem</div> 
 
    <div class="col col3">Lorem</div> 
 
    <div class="col col3">Lorem</div> 
 
</div> 
 
<div class="row2"> 
 
    <div class="col col3">Lorem</div> 
 
    <div class="col col3">&nbsp;</div> 
 
    <div class="col col3">Lorem</div> 
 
    <div class="col col3">Lorem</div> 
 
</div>

カスタム定義された.col-md-offset-3クラスを使用して、別の例です。

.col { 
 
    display: inline-block; 
 
    margin-right: 4%; 
 
    float: left; 
 
} 
 

 
.col:last-child { 
 
    margin-right: 0; 
 
} 
 

 
.col3 { 
 
    width: 21.98%; 
 
} 
 

 
.col-md-offset-3 { 
 
    margin-left: 25.98%; /* combined margin = default margin (4%) + col width (21.98%) */ 
 
}

<div class="row1"> 
 
    <div class="col col3">Lorem</div> 
 
    <div class="col col3">Lorem</div> 
 
    <div class="col col3">Lorem</div> 
 
    <div class="col col3">Lorem</div> 
 
</div> 
 
<div class="row2"> 
 
    <div class="col col3">Lorem</div> 
 
    <div class="col col3"></div> 
 
    <div class="col col3 col-md-offset-3">Lorem</div> 
 
    <div class="col col3">Lorem</div> 
 
</div>

Answer 2

私が追加したようにあなたは、あなたが（ピクセルは、画面上の最小単位である）を追加したい最小単位でmin-height値を追加することができますので、スペースを占有するために何のコンテンツがありませんので、これは起こりますmin-height:1px。それは私のレイアウトフローを適切に保ちます。

.col { 
 
    margin-right: 4%; 
 
    float: left; 
 
    min-height: 1px; 
 
    /* give a small space - practiced by Bootstrap framework as well */ 
 
} 
 

 
.col:last-child { 
 
    margin-right: 0; 
 
} 
 

 
.col3 { 
 
    width: 21.98%; 
 
}

<div class="row1"> 
 
    <div class="col col3">Lorem</div> 
 
    <div class="col col3">Lorem</div> 
 
    <div class="col col3">Lorem</div> 
 
    <div class="col col3">Lorem</div> 
 
</div> 
 
<div class="row2"> 
 
    <div class="col col3">Lorem</div> 
 
    <div class="col col3"></div> 
 
    <div class="col col3">Lorem</div> 
 
    <div class="col col3">Lorem</div> 
 
</div>