在一行中對齊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>