CSS div布局 常見(jiàn)問(wèn)題1 換行
https://www.xiaobuteach.com/html/layout-faq/faq1.html?from=bili
CSS div布局 常見(jiàn)問(wèn)題1 換行
1 原計(jì)劃目標(biāo)
外部div1寬度300px；
內(nèi)部3個(gè)子div：通過(guò)float:left設(shè)置成3列；每個(gè)寬度100px。
2 實(shí)際結(jié)果
代碼
<!DOCTYPE html>
<html>
<head>
? ?<meta charset="UTF-8" >
? ?<title>html 布局問(wèn)題 | 小步教程</title>
? ?<style>
? ? ? ?#div1{
? ? ? ? ? ?width: 300px;
? ? ? ? ? ?
? ? ? ?}
? ? ? ?#div1::after{
? ? ? ? ? ?content: '';
? ? ? ? ? ?display: block;
? ? ? ? ? ?clear: both;
? ? ? ?}
? ? ? ?#div1>div{
? ? ? ? ? ?float: left;
? ? ? ? ? ?width:100px;
? ? ? ? ? ?height: 50px;
? ? ? ? ? ?border: 1px solid #f00;
? ? ? ? ? ?
? ? ? ?}
? ?</style>
</head>
<body>
? ?<div id="div1">
? ? ? ?<div >第1列</div>
? ? ? ?<div >第2列</div>
? ? ? ?<div >第3列</div>
? ?</div>
</body>
</html>
下拉查看答案。
3 分析
盒子模型的box-sizing屬性的默認(rèn)值：content-box，表示width是內(nèi)容寬度，而不是總寬度。
3個(gè)子div的完整寬度：內(nèi)容寬度100px+左右邊框?qū)挾?px=102px。
而外層div的內(nèi)容寬度：300px，只夠放兩個(gè)子div。
即：元素總寬度計(jì)算問(wèn)題引起的換行。
4 解決方法1
將外層div的寬度改為306px。剛好容納。
? ? ? ?#div1{
? ? ? ? ? ?width: 306px;
? ? ? ?}
F12查看盒子模型
這個(gè)解決方法的缺點(diǎn)：還要算寬高，而且算出來(lái)是零碎值，累。
5 解決方法2
將所有元素的box-sizing改整成border-box，表示width是總寬度。
? ? ? ?*{
? ? ? ? ? ?box-sizing: border-box;
? ? ? ?}
? ? ? ?#div1{
? ? ? ? ? ?width: 300px;
? ? ? ?}
F12查看盒子模型
