Css 3柱，将中心柱与中心对齐

我有一个有趣的任务

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

这是三列滑块。它必须是100%宽度。您能建议我如何将中心幻灯片与中心对齐？左中滑块和右中滑块之间的最小边缘必须为150px

现在我遇到了一个问题，3d幻灯片位于秒的下方，如何使其内联？

试试这个

<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>

第一张幻灯片
第二张幻灯片
三维幻灯片
.fs
{
浮动：左；
宽度：50px；
}
.ss
{
浮动：左；
保证金：自动；
}
.ts
{
浮动：左；
宽度：50px；
}
.滑块
{
宽度：200px；
}

你能试试这个吗

 <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>

.首先
{
浮动：左；
}
第二
{
浮动：左；
保证金：自动；
}
第三
{
浮动：左；
}      
.滑块
{
宽度：300px；
}
.滑杆组{
宽度：100px；
}
第一张幻灯片
第二张幻灯片
三维幻灯片

---

演示：

听起来你想把你的日常工作外包给SO？不，我有一个使用表格单元格的解决方案，但它只有固定的边距，不知道如何不固定边距。但它是否将是100%宽度？所有div的宽度都是相同的200px，然后您可以根据需要为第二个div留下填充。

 <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>