Question

我有这个HTML：

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css" rel="stylesheet"/>


    <div class="card">
        <div class="card-section">
        <section class="row">
            <article class="columns small-8">
              Text Text Text Text
              Text Text Text 
              Text Text Text Text
              Text Text Text
              Text Text Text Text
              Text Text Text
            </article>
            <article style="border-left:1px solid #000;" class="columns small-4">
              Text
            </article>
        </section>
        </div>
        <div class="card-divider">
          <input type="checkbox">
          <label>Add to compare</label>
        </div>
      </div>

我想在列之间添加一条垂直线，从卡的顶部到底部一直延伸。

添加border:...样式不会有帮助，因为卡片类有填充。

使用position:absolute创建元素没有帮助，因为这是一个响应式页面，所有内容都需要是动态的

Answer 1

搜索后我没有找到任何好的预制解决方案，所以我所做的是从linear-gradient创建一个背景图像，并设置一个由百分比组成的背景位置，使其动态如下：

.card{
    background-color: #fff;
    background-image: -moz-linear-gradient(180deg, transparent, #ccc, transparent);
    background-image: -webkit-linear-gradient(180deg, transparent, #ccc, transparent);
    background-image: -o-linear-gradient(180deg, transparent, #ccc, transparent);
    background-image: linear-gradient(180deg, transparent, #ccc, transparent);
    background-position: 65%;
    background-repeat: repeat-y;
    background-size: 1px 1px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css" rel="stylesheet"/>


    <div class="card" style="background-color: #fff;background-image: -moz-linear-gradient(180deg, transparent, #ccc, transparent);background-image: -webkit-linear-gradient(180deg, transparent, #ccc, transparent);background-image: -o-linear-gradient(180deg, transparent, #ccc, transparent);background-image: linear-gradient(180deg, transparent, #ccc, transparent);background-position: 65%;background-repeat: repeat-y;background-size: 1px 1px;">
        <div class="card-section">
        <section class="row">
            <article class="columns small-8">
              Text Text Text Text
              Text Text Text 
              Text Text Text Text
              Text Text Text
              Text Text Text Text
              Text Text Text
            </article>
            <article class="columns small-4">
              Text
            </article>
        </section>
        </div>
        <div class="card-divider">
          <input type="checkbox">
          <label>Add to compare</label>
        </div>
      </div>

Answer 2

使用伪元素更新答案：

＆＃13;

.card-section {
  position:relative;
  }
.small-4:before {
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  border-right:solid;
  margin-left:-0.75em;
  }

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css" rel="stylesheet"/>


    <div class="card">
        <div class="card-section">
        <section class="row">
            <article class="columns small-8">
              Text Text Text Text
              Text Text Text 
              Text Text Text Text
              Text Text Text
              Text Text Text Text
              Text Text Text
            </article>
            <article class="columns small-4">
              Text
            </article>
        </section>
        </div>
        <div class="card-divider">
          <input type="checkbox">
          <label>Add to compare</label>
        </div>
      </div>

＆＃13;

修改

您还可以覆盖基金会CSS以首先摆脱浮动，然后重置显示：

display：flex （如果孩子漂浮则不在乎）

＆＃13;

.row {
  display:flex;
}
.row :last-child {/* last cells chosen for demo cause shorter in content */
  border-left:solid;
 /* Demo purpose : see me */
 background:lightgray
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css" rel="stylesheet"/>
  <div class="card">
        <div class="card-section">
        <section class="row">
            <article class="columns small-8">
              Text Text Text Text
              Text Text Text 
              Text Text Text Text
              Text Text Text
              Text Text Text Text
              Text Text Text
            </article>
            <article class="columns small-4">
              Text
            </article>
        </section>
        </div>
        <div class="card-divider">
          <input type="checkbox">
          <label>Add to compare</label>
        </div>
      </div>

＆＃13;

display：table + float：none;因为浮动杀死显示：（

＆＃13;

.row {
  display:table;
  width:100%;
}
.card .card-section .row > article.columns {
  display:table-cell;
  float:none;/* else display is killed */
}
.row :last-child {/* shortest chosen for demo, you could select first-child or .small-4 */
  border-left:solid;
 /* Demo purpose : see me */
 background:lightgray
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css" rel="stylesheet"/>
  <div class="card">
        <div class="card-section">
        <section class="row">
            <article class="columns small-8">
              Text Text Text Text
              Text Text Text 
              Text Text Text Text
              Text Text Text
              Text Text Text Text
              Text Text Text
            </article>
            <article class="columns small-4">
              Text
            </article>
        </section>
        </div>
        <div class="card-divider">
          <input type="checkbox">
          <label>Add to compare</label>
        </div>
      </div>

＆＃13;

显示：网格....好吧也许在未来然后flex将完全有效，用更少的CSS来编写。 BTW，display:table最终将包括不接受flex模型的旧版浏览器

基础css在列之间添加垂直线

2 个答案:

修改