將div對齊成一條線，最左，最中，最右

Question

在父類wrapped_inside下，我主要有3個div。 我想在一行中對齊所有3個div。 一個在兩個div的中間其余部分，分別位於最左端和最右端。 下面的代碼在除IE之外的所有瀏覽器中均能正常工作。

請注意，下面的CSS和HTML頁面是較大的html的一部分。 我僅復制了下面隨附的演示示例的重要部分。

 .wrapped_inside div:nth-child(3) { position: relative; display: block; } .wrapped_inside div:nth-child(3) div:nth-child(1) { float: left; padding-top: 5px; } .wrapped_inside div:nth-child(3) div:nth-child(2) { padding: 10px; position: absolute; left: 50%; } .wrapped_inside div:nth-child(3) div:nth-child(3) { // left: 0%; float: right; padding-top: 5px; } 

 <div class="wrapped_inside"> <div class="arw"></div> <div class="arw"></div> <div class="arw"> <div class="type-4"> <div id="one">footer text1</div> </div> <div class="type-2"> <div class="two"> <a href="javascript:void(0)"> <span >text2 </span> </a> </div> </div> <div class="type-6"> <div > <a href="#"> <span class="menu-left">0</span> </a> </div> </div> </div> </div> 

Answer 1

刪除此div <div class="col-sm-6"></div>

 .wrapped_inside div:nth-child(3) { position: relative; display: block; } .wrapped_inside div:nth-child(3) div:nth-child(1) { float: left; padding-top: 5px; } .wrapped_inside div:nth-child(3) div:nth-child(2) { padding: 10px; position: absolute; left: 50%; } .wrapped_inside div:nth-child(3) div:nth-child(3) { // left: 0%; float: right; padding-top: 5px; } 

 <div class="wrapped_inside"> <div class="arw"></div> <div class="arw"></div> <div class="arw"> <div class="type-4"> <div id="one">footer text1</div> </div> <div class="type-2"> <div class="two"> <a href="javascript:void(0)"> <span >text2 </span> </a> </div> </div> <div class="type-6"> <div > <a href="#"> <span class="menu-left">0</span> </a> </div> </div> </div> </div>