CSS - フロート左+パディング=最後の下降？

Question

3浮動小数点型の左側のカラムで、幅はそれぞれ33.33％です。そして、パッディングを追加して、列の見た目をきれいにしました。しかし、明らかに最後のDIVは新しい行にプッシュされます。これに対する解決策はありますか？ここでも参考にして再現しています。

* { 
 
    padding:0; 
 
    margin:0; 
 
} 
 
.row { 
 
    width:80%; 
 
    display:block; 
 
    margin:40px auto; 
 
    background: #f3f3f3; 
 
    overflow:auto; 
 
} 
 
.col { 
 
    float:left; 
 
    width:33.33%; 
 
    background:#333; 
 
    color:#fff; 
 
    text-align:center; 
 
    position:relative; 
 
    padding:20px 
 
} 
 

 
.ful-dark { 
 
    opacity:0.9 
 
} 
 

 
.mid-dark { 
 
    opacity:0.8 
 
} 
 

 
.lil-dark { 
 
    opacity:0.7 
 
}

<div class="row"> 
 
    <div class="col ful-dark"><h1>One</h1></div> 
 
    <div class="col mid-dark"><h1>Two</h1></div> 
 
    <div class="col lil-dark"><h1>Three</h1></div> 
 
</div>

Answer 1

任意の順序を含むフルサイズになるように提供サイズを、強制的に使用box-sizing: border-box、あなたの詰め物のような間隔。

* { 
 
    padding:0; 
 
    margin:0; 
 
    box-sizing: border-box; 
 
} 
 
.row { 
 
    width:80%; 
 
    display:block; 
 
    margin:40px auto; 
 
    background: #f3f3f3; 
 
    overflow:auto; 
 
} 
 
.col { 
 
    float:left; 
 
    width:33.33%; 
 
    background:#333; 
 
    color:#fff; 
 
    text-align:center; 
 
    position:relative; 
 
    padding:20px 
 
} 
 

 
.ful-dark { 
 
    opacity:0.9 
 
} 
 

 
.mid-dark { 
 
    opacity:0.8 
 
} 
 

 
.lil-dark { 
 
    opacity:0.7 
 
}

<div class="row"> 
 
    <div class="col ful-dark"><h1>One</h1></div> 
 
    <div class="col mid-dark"><h1>Two</h1></div> 
 
    <div class="col lil-dark"><h1>Three</h1></div> 
 
</div>

Answer 2

あなたは3 *（パディング右+パディング左+幅）が100％に等しくなるようにしたいです。

はパディングが、残念ながらサイズで、デフォルトではカウントされませんので、幅+パディングが第三よりそれぞれが実際より広くなり

.col { 
    float:left; 
    width:31.33%; 
    background:#333; 
    color:#fff; 
    text-align:center; 
    position:relative; 
    padding:1%; 
} 

Answer 3

を試してみてください。 box-sizing: border-boxは幅測定のすべてのパディング&ボーダー部分を作り、これに対抗するための素晴らしいツールです。

* { 
 
    padding:0; 
 
    margin:0; 
 
    box-sizing: border-box; 
 
} 
 
.row { 
 
    width:80%; 
 
    display:block; 
 
    margin:40px auto; 
 
    background: #f3f3f3; 
 
    overflow:auto; 
 
} 
 
.col { 
 
    float:left; 
 
    width:33.33%; 
 
    background:#333; 
 
    color:#fff; 
 
    text-align:center; 
 
    position:relative; 
 
    padding:20px 
 
} 
 

 
.ful-dark { 
 
    opacity:0.9 
 
} 
 

 
.mid-dark { 
 
    opacity:0.8 
 
} 
 

 
.lil-dark { 
 
    opacity:0.7 
 
}

<div class="row"> 
 
    <div class="col ful-dark"><h1>One</h1></div> 
 
    <div class="col mid-dark"><h1>Two</h1></div> 
 
    <div class="col lil-dark"><h1>Three</h1></div> 
 
</div>

Answer 4

これは、パディングです。 box-sizing: border-box;を入れてみてください。これにより、パディングが宣言されたときにコンテナのwidthが保持されます。

* { 
 
    padding:0; 
 
    margin:0; 
 
} 
 
.row { 
 
    width:80%; 
 
    display:block; 
 
    margin:40px auto; 
 
    background: #f3f3f3; 
 
    overflow:auto; 
 
} 
 
.col { 
 
    float:left; 
 
    width:33.33%; 
 
    background:#333; 
 
    color:#fff; 
 
    text-align:center; 
 
    position:relative; 
 
    padding:20px; 
 
    box-sizing: border-box; 
 
} 
 

 
.ful-dark { 
 
    opacity:0.9 
 
} 
 

 
.mid-dark { 
 
    opacity:0.8 
 
} 
 

 
.lil-dark { 
 
    opacity:0.7 
 
}

<div class="row"> 
 
    <div class="col ful-dark"><h1>One</h1></div> 
 
    <div class="col mid-dark"><h1>Two</h1></div> 
 
    <div class="col lil-dark"><h1>Three</h1></div> 
 
</div>