5

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

在此处输入图像描述

编辑

看看这里

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

4 回答 4

5

在网格 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 */
}
于 2012-06-22T01:57:28.320 回答
2

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

于 2011-10-11T06:03:46.077 回答
1

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

  • 我的父网格类
.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>

结果

于 2021-07-13T18:42:07.607 回答
0

正如 gtamil 所说,它将为每一列添加边框的宽度。因此,我看到的您的选择是:1)按照他说的做2)从具有1px边框的每列中删除1px 3)使用背景图像而不是实际边框

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

于 2011-10-11T07:32:48.910 回答