css - 展开 div 以使用 css 获得剩余宽度

Question

我需要帮助，我有 4 个 div 元素，其中三个具有固定宽度，其中一个需要具有自动宽度。第二个元素需要具有可变宽度。

例如：

<div id="wrapper">
  <div id="first">
  </div>
  <div id="second">
  </div>
  <div id="third">
  </div>
  <div id="fourth">
  </div>
</div>

CSS：

#first,#second,#third,#fourth{
  float:left;
}
#second{
  width:auto;
  overflow:hidden;
}
#first,#third,#fourth{
  width: 200px;
}

感谢帮助

Answer 1

这可以使用display: table-cell jsfiddle来实现

CSS

#wrapper .item{ 
    display: table-cell; 
    width: 150px; 
    min-width: 150px; 
    border: 1px solid #777; 
    background: #eee; 
    text-align: center;
}

#wrapper #second{
    width: 100%
}

标记

  <div id="wrapper">
     <div id="first" class="item">First
     </div>
     <div id="second" class="item">Second
     </div>
     <div id="third" class="item">Third
     </div>
     <div id="fourth" class="item">Fourth
     </div>
  </div>

更新

浮动版

CSS

     #wrapper div{background:#eee; border: 1px solid #777; min-width: 200px;}
     #first{
        float: left;
     }
     #wrapper #second{
        width: auto;
        background: #ffc;
        border: 1px solid #f00;
        min-width: 100px;
        overflow: hidden;
     }
     #first, #third, #fourth{
        width: 200px;
     }

     #third, #fourth{float: right;}

标记，移动 #second 到结尾

  <div id="wrapper">
     <div id="first">First</div>
     <div id="third">Third</div>
     <div id="fourth">Fourth</div>
     <div id="second">Second</div>
  </div>

Answer 2

我想你可能正在寻找这个：

如果你有这样的事情，这是供你参考的，那么你可以用这个来解决问题，我完全不知道你的 css 是什么样子，但这是基本的想法。

在这里演示

CSS

#wrapper
{
    width:960px;
}
#first
{
    float:left;
    width:240px;
}
#second
{
    width:240px;
    float:left;
}
#third
{
    float:left;
    width:240px
}

在这里，您的最后一个div宽度将自动设置。