在两个流体DIV之间固定px边距

我正在处理一个包含两个相邻流体宽度分隔（每个宽度：50％）的布局，这个分隔是一个容器宽度的80％。在两个流体DIV之间固定px边距

我想在左右50％divs之间有一个10px的余量，但我需要整个程序集以适应80％体宽的容器。据我所知，减小左右DIV的宽度将有助于为我提供10px中心边距的空间，但这也意味着整个左边DIV /右边DIV/10px边距装配通常不会达到身体的80％宽度。

有没有办法重新计算左，右的DIV的宽度，使他们占据累计身体宽度的80％时，有一个固定的利润率10px的在他们之间，不管是什么浏览器窗口大小来？不确定这是否适用于CSS。如果Javascript是实现它的唯一方法，那很好，但如果有一些隐藏的CSS技巧我错过了，那将会很棒。

这里是我的CSS：

#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：

<div id="logoplace"> 
</div> 
<div id="navcontainer"> 
</div> 
<div id="rowone"> 
    <div id="rowoneone"> 
    </div> 
    <div id="rowonetwo"> 
    </div> 
</div>

最后这里有一个JsFiddle显示我得到的结果。右浮动的DIV越来越低，显然是因为我已经将浮动的DIV设置为50％，然后添加了固定保证金。

任何帮助，非常感谢！

来源

2012-10-30 Marcatectura

下面是一种方法：http://jsfiddle.net/thirtydot/KX6eR/30/（我不得不添加一个额外的包装，这不是很好...） – thirtydot

十三岁，仍然非常简单 - 如果你不介意，加上这个答案，我可以接受它！ – Marcatectura

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

添加一个额外的包装：

<div id="rowone"> 
    <div id="rowonewrapper"> 
     <div id="rowoneone"></div> 
     <div id="rowonetwo"></div> 
    </div> 
</div>

然后调整两个内部div小号略：

#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; 
}

来源

2012-11-08 10:43:07 thirtydot

如果你能一个元素添加到您的HTML，你可以做以下...

<div id="rowone"> 
    <div id="rowonepad"> 
    <div id="rowoneone"> 
    </div> 
    <div id="rowonetwo"> 
    </div> 
    </div> 
</div>

然后将下面的CSS

#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;属性，去掉需要包装

<div id="rowone"> 
    <div id="rowoneone"> 
    </div> 
    <div id="rowonetwo"> 
    </div> 
</div>

然后将下面的CSS

#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; 
}

来源

2012-10-30 17:33:18

这似乎是一个很好的解决方案，但是我很担心浏览器支持 - 为盒大小的广泛支持？ – Marcatectura

http://caniuse.com/css3-boxsizing –

保罗爱尔兰似乎认为它是非常安全：http://paulirish.com/2012/box-sizing-border-box-ftw/ – sheriffderek

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

来源

2012-10-30 17:38:30

如果您在使用边界盒很舒服，第一次你的项目中的类型和类型“类型”的东西 - 这是我一直在做的事情当我们真的需要固定的排水沟宽度时。边框是94％ - 但CSS3选择器如：首先是IE 9以上。可能有一个polyfill？下面是关键部分，我不喜欢使用包装 - 但它的工作原理。看到更清晰的图片的链接。数学变得非常时髦，但是你可以使用尽可能多的列做你想要的。

http://codepen.io/sheriffderek

HTML

<div class="column-w"> 
    <div class="column main"> 

    [column01] 

    </div> 
</div> 

<div class="column-w"> 
    <div class="column sub"> 

    [column02] 

    </div> 
</div>

CSS

.column-w { 
    width: 50%; 
    float: left; 
} 

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

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

来源

2013-05-17 05:17:22 sheriffderek

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

calc(X% [math operand] Xpx)

有跨浏览器的变体，如

-webkit-calc(...)

我不知道任何其他人。

我喜欢与额外的包装上面的解决方案，但。这是一个美丽的黑客！：D

来源

2014-06-22 09:56:49

在两个流体DIV之间固定px边距

回答

相关问题