Question

我在这个网站上搜索过，发现了很多类似的问题，但找不到适合我情况的修复方法。

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

我的问题是我希望列之间有绝对的空间（例如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中）设置了不正确的栏，因为我只想在底部有一个阴影。

Answer 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;

Answer 2

查看calc()函数

也可能是一个想法

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

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

2 个答案: