百分比宽度div之间的像素间距（以列为单位）？答案

【问题标题】：Pixel spacing between percentage width divs (in columns)?百分比宽度div之间的像素间距（以列为单位）？
【发布时间】：2014-04-20 10:08:22
【问题描述】：

我搜索了整个网站，发现了许多类似的问题，但找不到适合我情况的修复程序。

所以，我想测试一个显示两列的新布局，并且在每一列中都可以添加一个带有一些文本的框。

我的问题是我想要列之间的绝对空间量（例如 5px）。

我试图通过将每列的宽度设置为 ~49% 来实现这一点，但如果窗口重新调整得太小，这实际上会在某个点与列重叠。

我还想在屏幕左右两边留出 5px 的边距。

这是我尝试过的 JSFiddle： http://jsfiddle.net/sbz3k/

HTML：

<body>
<div class="logo">logo here</div>
<div class="wrapper">
    <div class="left">
        <!--left side-->
        <div class="box">test
            <br/>test
            <br/>test</div>
        <!--left side end-->
    </div>
    <div class="right">
        <!--right side-->
        <div class="box">test
            <br/>test
            <br/>test
            <br/>test
            <br/>test
            <br/>test
            <br/>test</div>
        <!--right side end-->
    </div>
</div>
</body>

相关CSS：

.wrapper {
position:relative;
padding-top:88px;
width:100%;
}

.left {
padding:3px;
width:49%;
left:5px;
position:absolute;
}

.right {
padding:3px;
width:49%;
right:5px;
position:absolute;
}

.box:hover {
border:1px solid #AAAACC;
color:#000000;
}

.box {
color:#333333;
background-color:#FFFFFF;
border:1px solid #CCCCCC;
border-radius:5px;
padding:8px;
margin-top:5px;
word-wrap:break-word;
text-align:justify;
cursor:default;
font-family:Cambria;
}

p {
margin:.5em;
text-indent:20px;
}

还有一个不太重要的说明，我想知道我是否对顶部的栏（在 jsfiddle 中）的样式不正确，因为我只想要底部的阴影。

【问题讨论】：

标签： css html width percentage

【解决方案1】：

使用border-box

body {
    background-color:#DFDFDF;
}
* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
} 
.wrapper {
    position:relative;
    padding-top:88px;
    width:100%;
}
.left { 
    width:50%;
    left:0;
    padding: 5px;
    position:absolute;
}
.right {
    right:0;
    width:50%; 
    padding: 5px;
    position:absolute;
}

http://jsfiddle.net/NicoO/sbz3k/2/

更新，为了让阴影更加微妙，你可以试试这样的：

box-shadow:#000000 0px 1px 3px -1px;

【讨论】：

这很好用，但您介意解释一下星号的具体作用吗？
当然，* 是一个通配符或通用选择器，它适用于文档中的每个元素，但也是优先级最低的元素，这使得用更具体的元素覆盖它变得非常容易规则。您也可以在父项上使用它，以选择所有子、孙...节点。 w3.org/TR/selectors/#universal-selector

【解决方案2】：

查看calc()函数也可能是一个想法

.left {
   padding:3px;
   width:calc(50% - 6px);
}

【讨论】：

天哪，很好。为我工作。 jsfiddle.net/nn767x6L 。计算浏览器支持：caniuse.com/#feat=calc