0

我在这里看到了多个关于带有固定排水沟的流体网格的问题和答案。我还看到了很多关于等高流体宽度 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。我感谢任何建设性的反馈。

4

3 回答 3

1

你可以用 flexbox 做到这一点。将您的网格项目设置为具有margin-right: 20px（或任何您想要的排水沟），然后将最后一个子网格项目的边距设置为 0。

见小提琴：http: //jsfiddle.net/xLR3x/

于 2013-12-11T21:59:12.233 回答
0

你可以使用 :border-spacin:20px;如果这符合你的需要。

否则，您可以通过添加一个空的表格单元格元素:before，除了: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;
}
于 2013-12-11T20:23:16.003 回答
0

改进 jbenjohnson 的答案，我花了一些时间试图达到相同的结果，并且（我认为）我做了一些不错的事情。我在容器 div 上使用负边距来将内容与您的总体布局重新对齐，并在内部使用一些半尺寸的装订线边距，以保持每个人的间距均匀。

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

让我们清理 OP 的 HTML 以摆脱烦人的 gutter-div：

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

现在让我们应用一些喜欢 flexbox 的...

我正在使用像 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小提琴

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

注意 2 - 我还建议摆脱width属性并将它们与flex-basis值交换。它们在 flexbox 上下文中更加可靠和可预测。请参阅Chris Coyier 编写的出色的 FlexBox 指南中的 flex-basis 参考。

注意 3 - 如果没有水平填充，网格将与布局的极端边对齐（这很酷，尤其是对于固定宽度的布局）。我保留它们以复制 OP 的布局。

于 2015-10-16T17:14:11.230 回答