3列，將中心列對齊中心

Question

我有一個有趣的任務。

<div class="slider"> 
    <div class="1s">1st slide</div> 
    <div class="2s">2nd slide</div> 
    <div class="3s">3d slide</div> 
</div> 

CSS這個樣子的

.slider div { 
    width: 200px; 
} 

.1s { 
    float:left; 
} 

.2s { 
    margin: 0 auto; 
} 

.3s { 
    float: right; 
} 

這3列滑塊。它必須是100％的寬度。你能建議我如何將中央幻燈片對齊中心？中央左側和中央右側滑塊之間的最小容差必須爲150px。

現在我有問題，三維幻燈片位於第二，如何使其內聯？

Answer 1

試試這個

<div class="slider"> 
     <div class="fs"> 
      1st slide</div> 
     <div class="ss"> 
      2nd slide</div> 
     <div class="ts"> 
      3d slide</div> 
    </div> 


    <style type="text/css"> 
     .fs 
     { 
      float: left; 
      width: 50px; 
     } 
     .ss 
     { 
      float: left; 
      margin: auto; 

     } 
     .ts 
     { 
      float: left; 
      width: 50px; 
     } 
     .slider 
     { 
      width: 200px; 
     } 
    </style> 

Answer 2

能否請您試試這個，

<style type="text/css"> 

    .first 
    { 
     float: left; 

    } 
    .second 
    { 
     float: left; 
     margin: auto; 

    } 
    .third 
    { 
     float: left;    
    }  
    .slider 
    { 
     width: 300px; 
    } 

    .slider div{ 
      width:100px;  
    } 

    </style> 

    <div class="slider"> 
    <div class="first">  1st slide</div> 
    <div class="second"> 2nd slide</div> 
    <div class="third">  3d slide</div> 
    </div> 

演示：http://jsfiddle.net/7v28D/