html - 不同尺寸的分离器

是否可以将不同大小的分隔作为下面的示例 ojita

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

最佳答案

您可以使用 pseudo-elemnts 执行此操作:

首先将名称类分配给您的 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 但前提是满足你的需要

关于html - 不同尺寸的分离器，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27944136/