网格列之间的分隔符答案

【问题标题】：Separator Between grid columns网格列之间的分隔符
【发布时间】：2011-12-05 00:47:12
【问题描述】：

如何在网格列之间添加分隔符。我尝试添加边框，它总是破坏布局。请看附图以便清楚理解。

编辑

看这里

http://burnfatweightlossblog.com/aiu/junaid/testhtml/

代码

<div class="container_12">
  <div id="footer">
    <div class="alpha grid_3 dabox"> </div>
    <!-- Box 1-->
    <div class="grid_3 dabox"> </div>
    <!-- Box 2-->
    <div class="grid_3 dabox"> </div>
    <!-- Box 3-->
    <div class="omega grid_3 dabox"> </div>
    <!-- Box 4--> 
  </div>
  <!-- footer--> 
</div>

【问题讨论】：

你试过填充吗？有些'像这样 .col > { > padding-right:10px; > padding-left:50px; > } 如果我们有一些代码、表格或其他任何东西会更容易..
在这里回答stackoverflow.com/questions/8802074/…

标签： html css 960.gs css-frameworks

【解决方案1】：

添加边框会增加额外的 1px ，因此它会破坏布局，而不是向网格列添加边框，请尝试在其中添加一个 div 并为其添加边框...

【讨论】：

让我试试这个，希望这个能解决它：D

【解决方案2】：

正如 gtamil 所说，它将为每一列添加边框的宽度。所以在我看来，你的选择是： 1）照他说的做 2）从具有 1px 边框的每一列中删除 1px 3) 使用背景图片而不是实际边框

选项 3 通常是我的偏好，因为通常我希望分隔线的高度相同。我会在垂直重复的包装容器（而不是列 div）上有一个背景图像。如果您想使用此方法但分隔线的高度不相等，则可以将相同的图像添加到列中。

【讨论】：

现在我添加了backgorund图像并发送审查，但我真的希望它与css一起，感谢您的详细回复

【解决方案3】：

在网格 div 内围绕您的内容放置一个包装器 div

HTML：

<div class="grid_4">
    <div class="columnDivider">
        contents here
    </div>
</div>

CSS：

.columnDivider {
    border-right: 1px solid #DEDEDE;
    margin-right:-10px; /* size of gutter */
    padding-right:10px; /* size of gutter */
}

【讨论】：

这个概念对我来说效果很好，除了 css 我必须删除填充线......我需要的只是边距（填充搞砸了）。

【解决方案4】：

我有一个稍微不同的情况，我想添加的是仅在网格间隙中心位置的边框。 *我想要的东西并且仅在其中一个网格组中

我的父网格类

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 50px; /*I Required this have a space between two grid columns*/ 
}

边框类

.grid-item{
  border-right: 1px solid #000000;
  padding-right: 25px;
}

列间距修饰符

#divtoApply + .grid-container{
  column-gap: 25px;
}

示例 HTML 代码

<div>
   <div class="grid-container">
      <div>1 --> 1</div>
      <div>1 --> 2</div>
      <div>1 --> 3</div>
   </div>
   <div id="divtoApply" class="grid-container">
      <div class="grid-item">2 --> 1</div>
      <div class="grid-item">2 --> 2</div>
      <div>2 --> 3</div>
   </div>
</div>

【讨论】：