我的问题是我想要带有边框的并排元素,但我注意到如果不进行一些边距破解,则很难使用border
属性,而且看起来还是不正确。但是,当我使用outline
或box-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>
当元素数为偶数时看起来不错,但是当我有最后一个元素时,它看起来很奇怪。有人可能会建议我把它放到最后就可以了,但是有时大小是可以配置的,所以这很常见。
在最后一个元素正确排列边界(或轮廓)的情况下,实现此目标的正确方法是什么?
答案 0 :(得分:3)
由于要使用轮廓线创建边框,因此中间的轮廓线实际上彼此重叠。当您到达只有一个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>