[英]problem with width:50% when border != none (CSS)
problem with width:50% when border != none 宽度问题:边框时为50%!=无
take a look http://jsfiddle.net/5nYSf/ 看看http://jsfiddle.net/5nYSf/
result should be like this 结果应该是这样的
你可以将两个元素放在50%宽的彼此旁边,然后你可以在每个元素里面放置一个边距和边框: http : //jsfiddle.net/5nYSf/47/
If your borders are a fixed width you could substract the border lenght from your element width using the calc() function in your CSS. 如果边框是固定宽度,则可以使用CSS中的calc()函数从元素宽度中减去边框长度。
.attachments {
height:80px;
background-color:#E4E4E4;
}
.attachments span {
float:left;
height:100%;
width:calc(50% - 6px);
background-color:#9FB9CA;
border:3px #879AA8 solid;
}
http://jsfiddle.net/5nYSf/277/ http://jsfiddle.net/5nYSf/277/
The trick is, border and margin are not included in height/width calculation. 诀窍是,边框和边距不包括在高度/宽度计算中。 So, if you have element with width 100px, border 2px and left margin 10px, the 114px of horizontal space will be taken up. 因此,如果您的元素宽度为100px,边界为2px,左边距为10px,则将占用114px的水平空间。 (Border is counted twice: left and right.) IIRC, padding is not included too, but I'm not sure about that. (边界计数两次:左右。)IIRC,填充也不包括在内,但我不确定。
There're several options to solve this. 有几种方法可以解决这个问题。 You can have width:49%
on both elements or width:50%
on first and make second to take up the rest. 你可以在两个元素或width:50%
上有width:49%
width:50%
第一个是width:50%
,第二个是占用其余部分。
If both elements must take exactly equal space, you can include each in its own div
. 如果两个元素必须占用完全相等的空间,则可以将每个元素包含在其自己的div
。 Those divs will have no border/margin/padding and take up exactly 50% of space and border will be specified on inner element. 这些div将没有边框/边距/填充,占据空间的50%,并且将在内部元素上指定边框。
The last method in action: 最后一种方法:
http://jsfiddle.net/5nYSf/35/ http://jsfiddle.net/5nYSf/35/
There is a easy way: add { box-sizing: border-box; 有一种简单的方法:添加{box-sizing:border-box; } in .attachments and the 50% width will contain the border too 在.attachments中,50%的宽度也包含边框
Border is in addition to the defined width, so 50% + 50% + 3px border (on both sides) ends up being 100% + 12px, which is 12px bigger than the containing element (100%). 边框是定义宽度的补充,因此50%+ 50%+ 3px边框(两边)最终为100%+ 12px,比包含元素(100%)大12px。 Try using 49% or some other measurement that will leave 12px for the border. 尝试使用49%或一些其他测量值,这将留下12px的边框。
不要忘记考虑这些边距(显示浅灰色区域)并且你不能使用高度:100%因为你不能使用宽度的原因:50%(如其他人所述)
the border expands the box. 边框扩大了框。
50% + border > 50% 50%+边界> 50%
you have to decrease the width: 你必须减少宽度:
.attachments {
height:80px;
background-color:#E4E4E4;
}
.attachments span {
display:inline-block;
height:100%;
width:48%;
background-color:#9FB9CA;
border:3px #879AA8 solid;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.