Question

我在这里看到了关于带固定排水沟的流体网格的多个问题和答案。我也看到了很多关于等高流体宽度div列。我试图同时做两件事，但没有找到具体的解决方案。

我能够使它工作，但我的解决方案似乎有点'hacky'和不稳定。下面是我用jsFiddle链接的标记。这是一种安全的方法来实现具有固定排水沟的等高流体宽度div，或者您是否建议更好的解决方案？我一直在努力改进我的语义并最近编写健壮的代码......

**浏览器支持仅需要IE9 +

jsFiddle

HTML

<div class="grid">
    <div class="grid_01">
        <h2>Change Password</h2>
        <p>Individual locations may only update their own password. The master location may update all passwords.</p>
        <p>If you have any questions, please contact the us at 555-555-5555.</p>
    </div>
    <div class="gutter"></div>
    <div class="grid_01">
        <h2>New Password</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.</p>
    </div>
</div>

CSS

.grid {display:table; padding:20px;}
.grid_01 {
    display:table-cell;
    width:50%;
    padding:20px;
    border-top:4px solid #a085c6;
    background:#ffffff;
    -moz-box-shadow:0px 1px 1px 0px #717171;
    -webkit-box-shadow:0px 1px 1px 0px #717171;
    box-shadow:0px 1px 1px 0px #717171;
}
.gutter {width:20px;}
*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

我最担心的是空的天沟div。我感谢任何建设性的反馈。

Answer 1

您可以使用flexbox执行此操作。将您的网格项设置为margin-right: 20px（或任何您想要的装订线），然后将last-child网格项margin-right设置为0。

请参阅小提琴：http://jsfiddle.net/xLR3x/

Answer 2

如果符合您的需要，您可以使用：border-spacin:20px;。

否则，您可以通过:before添加一个空的table-cell元素，:first-child除外。

.grid >div:before {
content:'';
display:table-cell;
width:20px;
}
.grid >div:first-child:before {
display:none;
}

或

.grid >div:not(:first-child):before {
content:'';
display:table-cell;
width:20px;
}

Answer 3

改进jbenjohnson的回答，我花了一些时间试图获得相同的结果，（我认为）我做了一些不错的事情。我在容器div上使用负边距来重新调整内容与您的总体布局和内部的一些半尺寸的天沟边距，以保持每个人均匀分布。

与jbenjohnson的答案相比，这里的改进是即使在使用flex-flow: wrap的网格上，边距也不会在右侧中断（这对响应式布局至关重要）。

让我们清理OP的HTML以摆脱恼人的gutter-divs：

<div class="grid">
    <div class="grid-cell">
        <h2>Change Password</h2>
        <p>Individual locations may only update their own password. The master location may update all passwords.</p>
        <p>If you have any questions, please contact the us at 555-555-5555.</p>
    </div>
    <div class="grid-cell">
        <h2>New Password</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.</p>
    </div>
</div>

现在让我们应用一些爱好弹性的......

我正在使用像OP一样的20px排水沟，所以我的边距是10px和-10px值。

.grid {
    display: flex;
    margin-left: -10px;
    margin-right: -10px;
    padding-left: 10px; // Optional, see NOTE 3
    padding-right: 10px;
}
.grid-cell {
    width: 50%; // that's not usually recommended, flex-basis is better.
    margin-left: 10px;
    margin-right: 10px;
}

<强> JS Fiddle

注意1 - 这不是黑客攻击。 W3C明确定义了对这些情况使用负边距的情况。对于OP的问题，这可能是最“合规”的答案。

注意2 - 我还建议删除width属性并将其与flex-basis值交换。它们在flexbox环境中更加可靠和可预测。请参阅Guide to FlexBox Chris Coyier的优秀{{3}}的参考文献。

注意3 - 如果没有水平填充，网格将与布局的极端对齐（这很酷，特别是对于固定宽度的布局）。我让他们留下来复制OP的布局。

相邻高度相等的div具有流体网格和固定排水沟

3 个答案: