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 |
?
然后稍微重新定位两个内部
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; } |
或者,您可以使用
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; } |