以下示例是为了演示我遇到的问题。
所以,如果我有一个200像素宽的容器
我在容器中添加了200px宽的行(将会添加很多行)
我想将div添加到总计200px(每行不同)的行中
一切正常,直到我向.cont div中添加1px实心边框为止。
为什么框大小不考虑.cont边框?
[编辑]这三个.cell div不添加边框就显示,没有所有三个.cell divs都显示边框。 [/编辑]
*,
*:before,
*:after {
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
-ms-box-sizing: border-box !important;
box-sizing: border-box !important;
}
.cont {
position: absolute;
background-color: white;
font-size: 12px;
overflow: hidden;
border: solid;
/* Remove this and it works */
border-color: purple;
border-width: 1px;
height: 200px;
width: 200px;
margin: 0;
padding: 0;
}
.h_row {
display: block;
width: 100%;
height: 22px;
line-height: 22px;
background-color: red;
overflow: hidden;
border-bottom: solid;
border-bottom-color: orange;
border-width: 1px;
margin: 0;
padding: 0;
}
.cell {
display: block;
float: left;
font-size: 11px;
height: 20px;
line-height: 20px;
text-align: left;
text-indent: 2px;
overflow: hidden;
margin: 0;
padding: 0;
}
.h_row>.cell {
font-size: 12px;
text-align: center;
height: 22px;
line-height: 22px;
border-right: solid;
border-right-color: pink;
border-right-width: 1px;
background-color: green;
}
.h_row>.cell:last-child {
border-right: none;
}
.w50 {
width: 50px;
}
.w100 {
width: 100px;
}
<div class="cont">
<div class="h_row">
<div class="cell w100">100</div>
<div class="cell w50">50</div>
<div class="cell w50">50</div>
</div>
</div>
答案 0 :(得分:0)
也许可以使用框阴影而不是使用边框,而是将其放在框内,这意味着在容器内基本上是1px边框
解决此问题的另一种方法是不设置像素大小,您可以尝试使用百分比来表示宽度,例如50%或10%
如果您想要该代码,可以尝试以下网站: link
答案 1 :(得分:0)
您应该使用box-sizing: content-box;
从元素宽度中排除边框宽度,并且容器保留200px。
答案 2 :(得分:0)
这实际上很简单。
我不知道.cont div为200px,左右边界为1px。
因此,其中的.h_row为198px,使用的是框大小。
因此,.cell需要加起来为198px而不是200px。
我知道这很简单-只需一点帮助就可以找到它!
-感谢@ZohirSalak!