CSS - Float Left + Padding = Last Div Go Down？

3左側浮球，每個寬度爲33.33％。我添加了填充以使列看起來更整齊。但顯然最後的DIV被推到了新的位置。這個的任何解決方案？這裏我也出來複製參考。CSS - Float Left + Padding = Last Div Go Down？

* { 
 
    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>

來源

2016-11-15 faliqaiman

使用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>

來源

2016-11-15 02:46:57

-1

你想3 *（填充右+填充左+寬度）等於100％。

嘗試

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

來源

2016-11-15 02:45:41 Travis

你沒看錯，但你這樣做了艱辛的道路。 'box-sizing：border-box'自動執行此操作。 –

填充遺憾的是不通過默認在上漿計數，所以寬度+填充使得每實際上比第三寬。 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>

來源

2016-11-15 02:46:35 Jacob

這是因爲填充。請嘗試放入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>

來源

2016-11-15 02:48:46

CSS - Float Left + Padding = Last Div Go Down？

回答

相關問題