html - 内联 block div 的全宽边框

Question

您好!

我有一些 div 将它们放在 display: inline-block 的行中，每个 div 都是 80px，并且根据屏幕，一些 div 可能在第二行。

例如，我们有拖到第二行的 div。现在我希望第二行的底部边框到行尾(全宽边框)，但在我的例子中，边框仅位于 div 下方。

this solution不适合我。 非常感谢

代码: JSFiddle

.dircell {
  width: 80px;
  height: 100%;
  display: inline-block;
  text-align: center;
  vertical-align: top;
  border-style: solid;
  border-width: 1px 0 1px 0;
  border-color: #67b0d1;
  position: relative;
  padding: 5px;
  overflow: hidden;
}

<div class="dirow_f">
  <div class="dircell"><a class="dircell_txt">1</a></div>
  <div class="dircell"><a class="dircell_txt">2</a></div>
  <div class="dircell"><a class="dircell_txt">3</a></div>
  <div class="dircell"><a class="dircell_txt">4</a></div>
  <div class="dircell"><a class="dircell_txt">5</a></div>
  <div class="dircell"><a class="dircell_txt">6</a></div>
  <div class="dircell"><a class="dircell_txt">7</a></div>
  <div class="dircell"><a class="dircell_txt">8</a></div>
  <div class="dircell"><a class="dircell_txt">9</a></div>
  <div class="dircell"><a class="dircell_txt">10</a></div>
</div>

Answer 1

您可以使用 flex 并尝试一下，

The flex CSS property specifies how a flex item will grow or shrink so as to fit the space available in its flex container.

.dirow_f {
  display: flex;
  flex-wrap: wrap;
  width: 50%;
}

.dirow_f > .dircell {
  flex: 1;
  text-align: center;
  border-style: solid;
  border-width: 1px 0 1px 0;
  border-color: #67b0d1;
  padding: 5px;
  font-size: 16px;
}

<div class="dirow_f">
  <div class="dircell"><a class="dircell_txt">1</a></div>
  <div class="dircell"><a class="dircell_txt">2</a></div>
  <div class="dircell"><a class="dircell_txt">3</a></div>
  <div class="dircell"><a class="dircell_txt">4</a></div>
  <div class="dircell"><a class="dircell_txt">5</a></div>
  <div class="dircell"><a class="dircell_txt">6</a></div>
  <div class="dircell"><a class="dircell_txt">7</a></div>
  <div class="dircell"><a class="dircell_txt">8</a></div>
  <div class="dircell"><a class="dircell_txt">9</a></div>
  <div class="dircell"><a class="dircell_txt">10</a></div>
</div>