关于CSS：固定两个流体DIV之间的px边距


Fixed px Margin Between two Fluid DIVs

我正在设计一种布局，该布局在一个容器中包含两个相邻的流体宽度div(每个宽度：50％)，该容器的宽度为主体宽度的80％。

我想在左右50％div之间留出10px的边距，但我需要将整个程序集装入80％的宽度容器中。我知道，减小左右DIV的宽度百分比将为我留出10px的中心距的空间，但这也意味着整个左DIV /右DIV / 10px的边距组合通常不会占主体的80％宽度。

有没有一种方法可以重新计算左右DIV的宽度，以使它们之间的间距固定为10px时，它们累计占据了主体宽度的80％，而不管浏览器窗口的大小如何调整？不确定CSS是否可行。如果Java语言是实现它的唯一方法，那很好，但是如果我缺少一些隐藏的CSS技巧，那就太好了。

这是我的CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
#logoplace {
width: 200px;
height: 200px;
background-color: red;
margin-left: auto;
margin-right: auto;
}

#navcontainer {
height: 30px;
width: 80%;
background-color: white;
margin: 5px auto;
opacity: 0.7;
}

#navcontainer:hover {
opacity: 1;
}

#rowone {
width: 80%;
height: 120px;
background-color: white;
margin: 5px auto;
}

#rowoneone {
width: 50%;
height: 120px;
background-color: green;
margin-right: 5px;
float: left;
}

#rowonetwo {
width: 50%;
height: 120px;
background-color: blue;
margin-left: 5px;
float: right;
}

html, body
{
height: 100%;
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
padding-bottom: 20px;
}

而我的HTML：

1
 

最后是一个JsFiddle，它显示了我得到的结果。右浮动的DIV越来越低，这显然是因为我将两个浮动的DIV都设置为50％，然后添加了固定边距。

任何帮助是极大的赞赏！

相关讨论

好的，这是一个2岁的问题，但是是的，我花了很长时间才学会使用

1
calc(X% [math operand] Xpx)

有跨浏览器的变体，例如

1
-webkit-calc(...)

我不认识其他人

我喜欢上面的解决方案加上额外的包装。这是一个美丽的技巧！ ：D

如果您在项目中使用边界框，第一种和第n种"类型"的东西感到满意-当我们确实需要固定装订线宽度时，这就是我一直在做的事情。 border-box为94％-但CSS3选择器(如：first类型)为IE 9及更高版本。可能有一个polyfill？以下只是关键部分，我不喜欢使用包装器-但它可以工作。请参阅链接以获取更清晰的图片。数学变得很时髦，但是您可以根据需要使用任意多列。

http://codepen.io/sheriffderek

的HTML

1
2
3
4
5
6
7
8
9
    [column01]

   



 

    [column02]

的CSS

1
2
3
4
5
6
7
8
9
10
11
12
.column-w {
  width: 50%;
  float: left;
}

.column-w:first-of-type {
  padding-right: 10px;
}

.column-w:last-of-type {
  padding-left: 10px;
}

http://jsfiddle.net/thirtydot/KX6eR/30/

添加一个额外的包装器：

1
 

？
然后稍微重新定位两个内部div：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#rowonewrapper {
    margin-right: 10px;
}
#rowoneone {
    width: 50%;
    height: 120px;
    background-color: green;
    float: left;
}

#rowonetwo {
    width: 50%;
    height: 120px;
    background-color: blue;
    float: right;
    position: relative;
    left: 10px;
}

根据浏览器的支持，您可以使用新的Box大小的CSS声明。 http://www.w3.org/TR/css3-ui/#box-sizing

如果可以在HTML中添加元素，则可以执行以下操作...

1
 

然后下面的CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#rowone {
  width: 80%;
  overflow: hidden;
}
#rowonepad {
  padding: 0 5px;
}
#rowoneone {
  float: left;
  width: 50%;
  margin-left: -5px;
}
#rowonetwo {
  float: right;
  width: 50%;
  margin-right: -5px;
}

或者，您可以使用box-sizing: border-box;属性，而无需包装器

1
 

然后下面的CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#rowone {
  width: 80%;
  overflow: hidden;
}
#rowoneone {
  box-sizing: border-box;
  float: left;
  width: 50%;
  padding-right: 5px;
}
#rowonetwo {
  box-sizing: border-box;
  float: right;
  width: 50%;
  padding-left: 5px;
}
相关讨论