Div 宽度百分比在 CSS 中不起作用
Div width percentage not working in CSS
这是我的 CSS:
.leftdiv {
width:20%;
border:2px solid blue;
float:left;
}
.middlediv {
width:60%;
border:1px solid orange;
float:left;
}
.rightdiv {
width:20%;
border:1px solid black;
float:right;
}
这是我的 html:
<body>
<div class="leftdiv">left</div>
<div class="middlediv">middle</div>
<div class="rightdiv">right</div>
</body>
我希望看到的是横跨屏幕的三个 div 占屏幕宽度的 100%。
而是看这个:
右边div在下一行
边框占用 space 未计入 div 宽度的额外空间。尝试将 box-sizing: border-box;
添加到每个 div 类.
你应该添加这个:
html, body {
margin: 0;
}
将全包 body
和 html
元素的默认边距重置为零
和
* {
box.sizing: border-box;
}
在您的百分比值中包含填充和边框。
html,
body {
margin: 0;
}
* {
box-sizing: border-box;
}
.leftdiv {
width: 20%;
border: 2px solid blue;
float: left;
}
.middlediv {
width: 60%;
border: 1px solid orange;
float: left;
}
.rightdiv {
width: 20%;
border: 1px solid black;
float: right;
}
<body>
<div class="leftdiv">left</div>
<div class="middlediv">middle</div>
<div class="rightdiv">right</div>
</body>
问题是,默认情况下,填充和边框是在宽度之外计算的,不包括在宽度值中。您需要使用 box-sizing: border-box override 来包含它们:
div {
box-sizing: border-box;
}
或者,最好将它添加到每个 individual div 的样式块中(因为您可能不想将它全部应用于页面上的所有 div ).
.leftdiv,.middlediv,.rightdiv{
box-sizing: border-box;
}
这是因为边界。
如果您省略边框,您的 div 将对齐。
使用 border-box 解决问题:
.leftdiv{
box-sizing: border-box;
width:20%;
border:2px solid blue;
float:left;}
.middlediv{
box-sizing: border-box;
width:60%;
border:1px solid orange;
float:left;}
.rightdiv{
box-sizing: border-box;
width:20%;
border:1px solid black;
float:right;}
box-sizing: border box 的想法是修改普通框模型的行为,将填充和边框视为宽度元素的一部分。所以现在当您设置 % 宽度时,边框已经被考虑在内。这就是为什么现在 20+20+60 达到 100% 的原因。
可以找到更多信息in this link
这是我的 CSS:
.leftdiv {
width:20%;
border:2px solid blue;
float:left;
}
.middlediv {
width:60%;
border:1px solid orange;
float:left;
}
.rightdiv {
width:20%;
border:1px solid black;
float:right;
}
这是我的 html:
<body>
<div class="leftdiv">left</div>
<div class="middlediv">middle</div>
<div class="rightdiv">right</div>
</body>
我希望看到的是横跨屏幕的三个 div 占屏幕宽度的 100%。
而是看这个:
右边div在下一行
边框占用 space 未计入 div 宽度的额外空间。尝试将 box-sizing: border-box;
添加到每个 div 类.
你应该添加这个:
html, body {
margin: 0;
}
将全包 body
和 html
元素的默认边距重置为零
和
* {
box.sizing: border-box;
}
在您的百分比值中包含填充和边框。
html,
body {
margin: 0;
}
* {
box-sizing: border-box;
}
.leftdiv {
width: 20%;
border: 2px solid blue;
float: left;
}
.middlediv {
width: 60%;
border: 1px solid orange;
float: left;
}
.rightdiv {
width: 20%;
border: 1px solid black;
float: right;
}
<body>
<div class="leftdiv">left</div>
<div class="middlediv">middle</div>
<div class="rightdiv">right</div>
</body>
问题是,默认情况下,填充和边框是在宽度之外计算的,不包括在宽度值中。您需要使用 box-sizing: border-box override 来包含它们:
div {
box-sizing: border-box;
}
或者,最好将它添加到每个 individual div 的样式块中(因为您可能不想将它全部应用于页面上的所有 div ).
.leftdiv,.middlediv,.rightdiv{
box-sizing: border-box;
}
这是因为边界。 如果您省略边框,您的 div 将对齐。 使用 border-box 解决问题:
.leftdiv{
box-sizing: border-box;
width:20%;
border:2px solid blue;
float:left;}
.middlediv{
box-sizing: border-box;
width:60%;
border:1px solid orange;
float:left;}
.rightdiv{
box-sizing: border-box;
width:20%;
border:1px solid black;
float:right;}
box-sizing: border box 的想法是修改普通框模型的行为,将填充和边框视为宽度元素的一部分。所以现在当您设置 % 宽度时,边框已经被考虑在内。这就是为什么现在 20+20+60 达到 100% 的原因。
可以找到更多信息in this link