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% 宽度。你能建议我将中央幻灯片与中心对齐吗？中左和中右幻灯片之间的最小边距必须为 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/