内联块 div 的垂直对齐边框

Question

我使用 display:inline-block.

垂直对齐了三个 div

https://jsfiddle.net/46t1kqmk/

对于右边框，样式为 div 的 :after。现在边框对齐不正确。

如何对齐所有边框？

有没有更好的添加边框的方法？

Answer 1

添加 top: 50%; 和 transform:translateY(-50%);

Fiddle: https://jsfiddle.net/46t1kqmk/1/

Answer 2

您不需要使用 :after

您可以使用 general sibling selector 应用左边距，然后将右边距应用到 :last-child。干净多了。

代码：

p,
h4,
h5 {
  margin: 0;
}
.row {
  border: 1px solid red;
  padding: 20px 0;
}
.col {
  box-sizing: border-box;
  display: inline-block;
  vertical-align: middle;
  padding: 20px;
  position: relative;
}
.col1 {
  width: 50%;
}
.col2,
.col3 {
  width: 20%;
}
.col1 ~ .col {
  border-left: 1px solid green;
}
.col:last-child {
  border-right: 1px solid green;
}

<div class="row">
  <div class="col col1">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <h5>Test title</h5>
  </div>
  <div class="col col2">
    <h4>Test</h4>
  </div>
  <div class="col col3">
    <h4>Test</h4>
  </div>
</div>

内联块 div 的垂直对齐边框

Vertical aligning border of inline-block divs

html

css

position