中心，而無需使用位置

Question

第二個div一個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"> 
 
\t <div class="abc"> 
 
    1st 
 
\t </div> 
 
\t <div class="def"> 
 
\t \t second 
 
\t </div> 
 
\t <div class="ghi"> 
 
\t \t third 
 
\t </div> 
 
</div>

Demo這裏