我试图让一个div中的5个div对齐,像这样：
有没有办法这样做没有使用边缘左？
我的意思是..如果我想消除这个中间div之一,他们仍然对齐？例如..如果我删除div4,其他将自动居中.喜欢这个：
我找到了一个解决方案：
#parent {
width: 615px;
border: solid 1px #aaa;
text-align: center;
font-size: 20px;
letter-spacing: 35px;
white-space: nowrap;
line-height: 12px;
overflow: hidden;
}
.child {
width: 100px;
weight: 100px;
border: solid 1px #ccc;
display: inline-block;
vertical-align: middle;
}
但问题是：
第一个div和最后一个必须像float left和float right …这个解决方案将每个事物都集中在一起：
解决方法
flexbox可能是你要找的答案.
#container {
display: flex;
justify-content: space-between;
border: 1px solid black;
background: #ccc;
}
#container>div {
width: 100px;
border: 1px solid black;
background: #fff;
height: 100px;
}
<div id="container"> <div>Box 1</div> <div>Box 2</div> <div>Box 3</div> <div>Box 4</div> <div>Box 5</div> </div>
如果要最大化browser compatibility,请务必添加正确的供应商前缀：
#container {
display: -moz-flex;
display: -ms-flex;
display: -webkit-flex;
display: flex;
/* … */
}
