html - 不同尺寸的分离器

Question

是否可以像下面的例子那样使用不同大小的分隔符

PlunkerDemo

<tr class="foo">
    <td>
        <div>
            <p>
            <span class="departureTime">03h00</span>
             <span>New-York</span>
            </p>
             <p class="espacement_important">
                <span class="arrivalTime">15h00</span>
                <span>Bahamas</span>
            </p>

            <p class="duration espacement_important"><span >8h00</span>
                <span>2 correspond.</span>
                <span>A380</span>
            </p>
          </div>
        </td>
      <td class="unavailable">indisponible</td>

    <td><input type="radio" />
        <label >10.00 €</label>
    </td>
    <td><input type="radio" />
        <label >50.00 €</label>
    </td>
</tr>

Answer 1

你可以使用伪元素来做到这一点:

首先将名称类分配给 td 元素，例如 long 和 short:

<td class="long">
  <div>
    <p>
      <span class="departureTime">03h00</span>
      <span>New-York</span>
    </p>
    <p class="espacement_important">
      <span class="arrivalTime">15h00</span>
      <span>Bahamas</span>
    </p>

    <p class="duration espacement_important"><span>8h00</span>
      <span>2 correspond.</span>
      <span>A380</span>
    </p>
  </div>
</td>
<td class="unavailable">indisponible</td>

<td class="short">
  <input type="radio" />
  <label>10.00 €</label>
</td>

然后像这样使用 CSS:

.long {
  position:relative;
}
.long:after {
  content:" ";
  height:80%;
  border-right:1px solid #eee;
  position:Absolute;
  right:0;
  top:10%;
}
.short {
  position:relative;
}
.short:after, .short:before {
  content:" ";
  height:40%;
  border-right:1px solid #eee;
  position:Absolute;
  right:0;
  top:30%;
}
.short:before {
  left:0;
  right:auto;
}

PlunkerDemo

---

如果你想避免使用类名，你可以使用 nth-child 但前提是满足你的需要