我想我可能已经知道了这个问题的答案,但我需要进行健全检查!
说我有
#gridtest{
width:590px;
}
我可以使用RESULT = TARGET / CONTEXT将宽度更改为百分比。在这种情况下,上下文是一个容器,其最大宽度设置为1000px,所以我可以这样做:
#gridtestpercent{
width:59%; /*590/1000*/
}
如果我要缩小窗口,div将始终与其容器成比例。但是,如果我想做什么
#gridtest{
width:570px;
border:10px solid red;
}
我可以根据现在为570的目标来处理宽度,但随着窗口缩小,所有比例都会不同步。
#gridtestpercentnoborder{
width:57%; /*570/1000*/
border:10px solid red;
}
我无法使用百分比边框。我不想使用JS继续检查上下文,我还不能使用CSS3 box-border声明。
如果我想使用Ethan Marcotte的响应式网页设计中所描述的技术,那么一切都相互缩小,如果使用边框,我会失去运气吗?
干杯!
答案 0 :(得分:12)
您可以使用CSS3 calc()功能,
.selector{
border: 5px solid black;
width: -moz-calc(50% - 10px);
width: -webkit-calc(50% - 10px);
width: calc(50% - 10px);
}
SASS mixin
@mixin calc($property, $expression) {
#{$property}: -moz-calc(#{$expression});
#{$property}: -webkit-calc(#{$expression});
#{$property}: calc(#{$expression});
}
article {
border: 1px solid red;
@include calc( width, '100% - 2px')
}
答案 1 :(得分:8)
您可以使用插入框阴影而不是边框:
box-shadow: 0px 0px 0px 10px red inset;
只需填充容器内部即可进行补偿。
编辑:我写“pad”但当然如果你使用填充它会抛弃盒子尺寸。保证内容的内容。
答案 2 :(得分:7)
接受的答案不正确。你实际上有两个选择:
使用box-sizing
属性,因此所有填充和边框都被视为大小的一部分:
.column {
width: 16%;
float: left;
margin: 0 2% 0 2%;
background: #03a8d2;
border: 2px solid black;
padding: 15px;
font-size: 13px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
或者,使用outline
属性而不是border属性。您仍然会遇到填充问题,但更容易添加。例如:
.column {
width: 16%;
float: left;
margin: 0 2% 0 2%;
background: #03a8d2;
outline: 2px solid black;
}
完整说明:http://designshack.net/articles/css/beating-borders-the-bane-of-responsive-layout/
答案 3 :(得分:5)
不幸的是,是的,你运气不好。绕过这个问题的一种黑客方法是使用用于创建边框的包装器div
。所以外部div
将是57%(在您的示例中),背景是您所需边框的颜色。然后,内部div
的宽度为96%左右(使用确切的数字来查找适合您设计的边框)。
答案 4 :(得分:4)
如果您想保持语义,可以使用div { box-sizing:border-box; }
或一些绝对定位的:after
元素。查看帖子How do I add 1px border to a div whose width is a percentage?
答案 5 :(得分:2)
此链接对此问题的两种解决方案提供了很好的解释:
http://designshack.net/articles/css/beating-borders-the-bane-of-responsive-layout/
答案 6 :(得分:2)
在CSS3中,您还可以使用新的box-sizing
属性将像素和填充计数包含在元素的width
中:
box-sizing: border-box;
答案 7 :(得分:0)
如果可能,根据您的设计,我喜欢做的是将边框作为绝对div,宽度为3px(例如),高度高于其父div。然后我设置隐藏在父div上的溢出。