css - 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 である必要があります。

3D スライドが 2 番目の下にあるという問題が発生しました。インラインにする方法を教えてください。

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/