divを1行、一番左、中、極右に合わせる

Question

私は主に3つのdivを親クラスのwrapped_insideの下に置いています。 3つのdivをすべて1行に整列させたい。極端な左右の端にある2つのdivの中の残りの部分に1つ。以下のコードは、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

これはあなたが右の中央anndのテキスト2で0を左でフッターのテキストをしたい<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>