用CSS分隔两个div [英] Separating two divs with CSS

问题描述

说我有两个div A和​​B，它们当前并排对齐。如何使A与B隔开50像素，同时又让A占用剩余空间的70％，让B占据剩余的30％？

Say I have two divs A and B, which are currently aligned side by side. How can I get A to be separated from B by 50px, while still letting A to take up 70% of the remaining space and B the remaining 30%?

编辑：在我实际尝试之前，早一点接受了答案。

Accepted the answer a little early before I actually tried. Whoops.

JSFiddles：

JSFiddles:

两个Divs的故事

现在分开了，但是现在第二行了吗？

Now separated, but now with the second one on a second line?

推荐答案

我相信您选择的答案将不起作用：

I believe your selected answer will not work:

http://jsfiddle.net/cNsXh /

编辑：

抱歉，上面的示例最初是不正确的。现在是。

/ edit

如您所见， div #b 将移至 div #a 下，因为 margin-left （或 padding-left ）将添加到 30％中。而且由于我们在此处将百分比与像素值混合在一起，因此我们将无法定义可以保证始终精确到100％的值。

As you can see, div #b will move under div #a because margin-left (or padding-left) will be added to the 30%. And because we're mixing percentage with pixel values here, we will not be able to define values that will guarantee to always add up to exactly 100%.

您将需要为 div #b 使用一个包装器，该包装器将具有 30％的宽度，而不为<$定义宽度c $ c> div #b ，但定义 margin-left 。因为 div 是一个块元素，它将自动填充包装div内的剩余空间：

You'll need to use a wrapper for div #b which will have 30% width, and not define a width for div #b, but define margin-left. Because a div is a block element it will automatically fill the remaining space inside the wrapper div:

http://jsfiddle.net/k7LRz/

这种方式您将绕过CSS<定义了3个奇怪的框模型功能，因此定义尺寸（宽度/高度）不会减去边距和/或填充和/或边框宽度。

我相信CSS 3的框模型会在此处提供更灵活的选择。但是，坦白地说，我不确定这些新功能是否可以跨浏览器支持。

This way you will circumvent the CSS < 3 box-model features which oddly enough was defined such that defining a dimension (width / height) will NOT subtract margins and/or paddings and/or border-width.
I believe CSS 3's box-model will provide more flexible options here. But, admittedly, I'm not sure yet about cross-browser support for these new features.

这篇关于用CSS分隔两个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！