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% ширины. Что вы можете предложить мне выровнять центральный слайд в центр? Минимальное расстояние между центральным левым и центральным правыми слайдами должно составлять 150 пикселей.

Теперь у меня проблема, что 3D-слайд находится под вторым, как сделать его встроенным?

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/