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并尝试使用

flex CSS属性指定弹性项的增长或缩小方式为了适应其弹性容器中的可用空间。

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

Answer 2

我已经更新了你的jsfiddle，在这里找到它

https://jsfiddle.net/o8jo163f/4/

.new{
  width:50%;
}

内联块div的全宽边框

2 个答案: