内联块div的垂直对齐边框

Question

我使用div垂直对齐了三个display:inline-block。

https://jsfiddle.net/46t1kqmk/

对于右边框，设置了:after的{​​{1}}样式。现在边界的对齐是不合适的。

如何对齐所有边框？

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

Answer 1

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

小提琴：https://jsfiddle.net/46t1kqmk/1/

Answer 2

您不需要使用:after

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

代码：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;