Question

我试图获得与折叠边框对表格和表格单元格相同但使用浮动div（或内联块div）的效果，请注意设计也是响应式的。标记看起来有点像这样：

<div class="parent">
  <div class="Lev1">
    label
  </div>
  <div class="Lev1">
    <div class="lev2">list item</div>
    <div class="lev2">list item</div>
    ..variable amount of Lev2 child divs
  </div>
</div>

目前我的CSS就是这样的

.parent {
  width:100%;
  border:1px solid #000;
}
.lev1 {
 float:left;
 border:0px;
}
.lev2 {
 float:left;
 border-right:1px solid #000;
}

在全屏幕上，所有孩子都水平堆叠，但在调整大小时，lev2孩子们开始垂直堆叠，然后缺失的顶部和底部边界变得明显。我希望能够在所有子元素周围放置1px边框，并使边框相互折叠。

我尝试过使用负边距，但是它们开始垂直翻倍并且完全失控。

不确定这是否可行，如果有人有想法会很棒。

Answer 1

我不确定你到底想要什么，但我设法使用负边距“折叠”.lev2 div边框。

这是css：

.lev2 {
  float:left;
  border:1px solid #000;
  margin-top:-1px;
  margin-left:-1px;
}

查看它是否有效here

浮动儿童的反应性崩溃边界

1 个答案: