10

我想我可能已经知道了这个问题的答案，但我需要进行健全性检查！

说我有

#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 在响应式网页设计中描述的技术，在这种技术中，一切都相对于彼此缩小，如果使用边框，我会不走运吗？

干杯!

4

7 回答 7

12

你可以使用 CSS3 calc()函数，

.selector{
  border: 5px solid black;
  width: -moz-calc(50% - 10px);
  width: -webkit-calc(50% - 10px);
  width: calc(50% - 10px);
}

SASS 混合

@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')
}
于 2013-04-10T19:39:32.210 回答
8

您可以使用插入框阴影而不是边框​​：

box-shadow: 0px 0px 0px 10px red inset;

只需填充容器内部即可进行补偿。

编辑：我写“pad”，但当然如果你使用填充它会抛出盒子尺寸。而是将内容放在里面。

于 2012-11-23T15:52:41.197 回答
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属性而不是边框​​属性。您仍然会遇到填充问题，但添加起来更容易。例子：

.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/

于 2014-04-23T17:18:30.027 回答
5

不幸的是，是的，你不走运。解决此问题的一种巧妙方法是div使用用于创建边框的包装器。因此，外部div将是 57%（在您的示例中），背景是您所需边框的颜色。然后，内部div将有 96% 左右的宽度（使用确切的数字来找到适合您设计的边框）。

于 2011-11-16T14:21:11.587 回答
4

如果你想保持语义，你可以使用div { box-sizing:border-box; }或一些绝对定位:after的元素。请参阅帖子如何将 1px 边框添加到宽度为百分比的 div？

于 2012-02-15T05:43:25.113 回答
2

在 CSS3 中，您还可以使用新box-sizing属性将像素和填充计数包含到width元素中：

box-sizing: border-box;
于 2014-07-10T16:43:18.853 回答
0

如果可能的话，根据您的设计，我喜欢将边框设置为绝对 div，宽度为 3px（例如），高度高于其父 div。然后我在父 div 上设置溢出隐藏。

于 2013-09-15T19:48:55.607 回答