不使用位置将div居中

Question

第二个div应该在中心对齐而不使用位置，并且第一个和最后一个div有浮动

 <div class="abc">
    </div>
    <div class="def">
    </div>
    <div class="ghi">
    </div>

Answer 1

如果您在first和last上使用浮动广告。它不起作用，最后一个div填充下去。你可以使用flex。

.container{
  display: flex;
}
.container div{
  flex: 1;
}
.abc{
  text-align: left
}
.ghi{
  text-align: right;
}
.def{
  text-align: center;
}

<div class="container">
	<div class="abc">
   1st
	</div>
	<div class="def">
		second
	</div>
	<div class="ghi">
		third
	</div>
</div>

Demo此处