时间戳

首页 > 解决方案 > 未对齐的“轮廓”与奇数的 div

html - 未对齐的“轮廓”与奇数的 div

问题描述

我的问题是我想要带边框的并排元素，但我注意到如果不做一些边距破解，很难使用该border属性，而且它看起来仍然不正确。但是，当我使用outlineorbox-shadow时，最后会遇到此对齐问题。

未对齐的轮廓

.inner {
  outline: 1px solid black;
  width: 50%;
  height: 50px;
  float: left;
  margin: 0;
  display: inline-block;
  box-sizing: border-box;
  position: relative;
  background: #fff;
}
<div class="inner">

</div>
<div class="inner">

</div>
<div class="inner">

</div>
<div class="inner">

</div>
<div class="inner">

</div>

当有偶数个元素时它看起来不错，但是当我有最后一个元素时它看起来很奇怪。有些人可能会建议我让它适合最后，这没关系，但有时可以配置大小，所以这可能是常见的情况。

在最后一个元素正确排列边框（或轮廓）的情况下，实现此目的的正确方法是什么？

标签： htmlcss

解决方案

因为您使用轮廓来创建边框，所以中心的轮廓实际上是相互重叠的。当你到达只有一个 div 的底部时，轮廓没有重叠，因此看起来没有对齐。您可以通过将其构建为表来解决此问题：

.table {
  width: 100%;
  display: table;
  border-collapse: collapse;
}

.column {
  display: table-row;
}

.inner {
  display: table-cell;
  border: 1px solid black;
  width: 50%;
  height: 50px;
  background: #fff;
}
<div class="table">
  <div class="column">
    <div class="inner"></div>
    <div class="inner"></div>
  </div>
  <div class="column">
    <div class="inner"></div>
    <div class="inner"></div>
  </div>
  <div class="column">
    <div class="inner"></div>
  </div>
</div>

推荐阅读