Question

如何在我创建的列之间绘制垂直边框（类似报纸）？我也愿意在css3中写这篇文章。

    #contentBox 
{
    margin: 0 auto;
    width: 80%;
}

#contentBox .article
{
    float: left;
    margin: 0;
    width: 50%;
    border-right: solid;
}

然后haml：

#contentBox
  .article
     %p text
  .article
     %p text

Answer 1

如评论，2个简单的选项：

1）伪

undefined

   #contentBox {
     margin: 0 auto;
     width: 80%;
     overflow: hidden;
     /* wraps floatting element */
   }
   #contentBox .article {
     float: left;
     margin: 0;
     width: 50%;
   }
   /* test  */
   #contentBox .article {
     height: 300px;
     background: rgba(0, 0, 0, 0.2);
   }
   #contentBox .article:nth-child(1) {
     height: 200px;
   }
   /* pseudo option */
   #contentBox {
     position: relative;
   }
   #contentBox:before {
     content: '';
     position: absolute;
     left: 50%;
     top: 0;
     bottom: 0;
     border-left: 1px solid;
   }

http://codepen.io/anon/pen/JGyJLo

2）背景图像（测试的线性渐变）描述的旧固体方法here

<div id='contentBox'>
  <div class='article'></div>
  <div class='article'></div>
</div>

   #contentBox {
     margin: 0 auto;
     width: 80%;
     overflow: hidden;
     /* wraps floatting element */
   }
   #contentBox .article {
     float: left;
     margin: 0;
     width: 50%;
   }
   /* test  */
   #contentBox .article {
     height: 300px;
     background: rgba(0, 0, 0, 0.2);/*  to see just because they might have different height */
   }
   #contentBox .article:nth-child(1) {
     height: 200px;
   }
   #contentBox {
     background: linear-gradient(to left, transparent 49.95%, black 49.95%, black 50%, transparent 50%)
   }

http://codepen.io/anon/pen/VezWMe

Answer 2

将以下行添加到您的css：

#contentBox .article
{   
    border-right-style: solid;
    border-right-color: #CCC;
    border-right-width: thin;
}

Answer 3

添加使用百分比宽度和边框的大小调整。

然后将边框应用于第一篇文章，用一行分割它们。

＆＃13;

* {
  box-sizing: border-box;
}
#contentBox {
  margin: 0 auto;
  width: 80%;
}
#contentBox article {
  float: left;
  margin: 0;
  width: 50%;
  height: 600px; /* DEMO HEIGHT */
}
#contentBox article:first-child {
  border-right: 2px solid red;
}

＆＃13;

<div id="contentBox">
  <article>Change the HTML article to any tag/element you would like to use...</article>
  <article>Change the HTML article to any tag/element you would like to use...</article>
</div>

＆＃13;

Answer 4

边框只是因为它是一个块元素，所以边框显示在屏幕的边缘，你可以display: inline这里是一个jsfiddle https://jsfiddle.net/kpx1tqf6/1/

列css之间的边界

4 个答案: