Html 用 CSS 分隔两个 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7523778/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Separating two divs with CSS
提问by wrongusername
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%?
假设我有两个 div A 和 B，它们目前并排对齐。如何让 A 与 B 分开 50px，同时仍然让 A 占据剩余空间的 70%，而 B 占据剩余的 30%？
EDIT: Accepted the answer a little early before I actually tried. Whoops.
编辑：在我实际尝试之前早点接受了答案。哎呀。
JSFiddles:
JSFiddle：
Now separated, but now with the second one on a second line?
现在分开了，但现在第二个在第二行？
采纳答案by Decent Dabbler
I believe your selected answer will not work:
我相信您选择的答案将不起作用：
edit:
Sorry, the above example was not correct at first. Now it is.
/edit
编辑：
对不起，上面的例子一开始是不正确的。现在它是。
/编辑
As you can see, div #bwill move under div #abecause 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将移至下方，div #a因为margin-left(或padding-left) 将被添加到30%. 并且因为我们在这里将百分比与像素值混合在一起，所以我们将无法定义能够保证总和为 100% 的值。
You'll need to use a wrapper for div #bwhich will have 30%width, and not define a width for div #b, but define margin-left. Because a divis a block element it will automatically fill the remaining space inside the wrapper div:
您需要使用div #b具有30%宽度的包装器，而不是为 定义宽度div #b，而是定义margin-left. 因为 adiv是一个块元素，它会自动填充包装器 div 内的剩余空间：
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 < 3 box-model 功能，这些功能奇怪地定义为定义尺寸（宽度/高度）不会减去边距和/或填充和/或边框宽度。
我相信 CSS 3 的 box-model 将在这里提供更灵活的选项。但是，不可否认，我还不确定这些新功能的跨浏览器支持。
回答by Utkarsh Panwar
Try this out if it solves your problem.
如果它解决了你的问题，试试这个。
<html>
<head>
<style type="text/css">
#Content
{
border: 3px solid blue;
position: relative;
height: 300px;
}
#divA
{
border: 3px solid red;
position: absolute;
margin-right: 25px;
left: 5px;
top: 5px;
bottom: 5px;
right: 70%;
}
#divB
{
border: 3px solid green;
position: absolute;
right: 5px;
top: 5px;
bottom: 5px;
left: 30%;
margin-left: 25px;
}
</style>
</head>
<body>
<div id="Content">
<div id="divA">
</div>
<div id="divB">
</div>
</div>
</body>
</html>
回答by zhongshu
just set the margin-left or padding-left of div B
只需设置 div B 的 margin-left 或 padding-left
回答by sandeep
@wrongusername; i know you accept that answer but you can check this solution as well in this you have no need to give extra mark-up& if you give paddingto your div it's not affect the structure.
@错误的用户名; 我知道你接受这个答案，但你也可以检查这个解决方案，你不需要额外的mark-up& 如果你给padding你的 div 它不会影响结构。
CHECK THIS EXAMPLE: http://jsfiddle.net/sandeep/k7LRz/3/
检查这个例子：http: //jsfiddle.net/sandeep/k7LRz/3/
回答by Eric Fortis
http://jsfiddle.net/efortis/HJDWM/
http://jsfiddle.net/efortis/HJDWM/
#divA{
width: 69%;
}
#divB{
width: 29%;
margin-left: 2%;
}
