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

更新

Float版本

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是怎样的，但这是基本的想法。

Demo Here

<强> CSS

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

此处您的最后div宽度将自动设置。