Jquery 两个分区的响应式布局一行中有固定长度 我有两个div 一个固定宽度20px 我希望第二个div获取其父容器的所有可用剩余宽度 我不知道父容器的px宽度。我在“%s”中有它

如何实现这一点？

使第二个div的宽度

100%

或

自动

，并通过其边距删除第一个div的宽度。工作示例：

尝试以下操作：

HTML:

JS:

---

您不需要javascript，也不需要其他人发布的css；让这家伙需要的东西变得复杂：

HTML

非浮动div将占用页面的其余宽度

---

快速提问：100%是否表示“父级的100%宽度”？…因此在显示时它将变为100%+20px宽度？？对于第二个div，如果我给auto，它不起作用，如果我给100%，我得到水平滚动条你是对的，对不起。解决方法：将第一个div放在第二个div中。同时，我将寻找一个仅CSS的方法。在您的解决方案中…如果我将#conatiner width从90->100%设置为#conatiner width…我得到了horizonatl滚动条…这是预期的吗？似乎唯一的方法是隐藏溢出。它是可行的，但有点粗糙，可能不是最好的编码实践。不管是什么情况：如果这是你需要的，那就更好了。扩展容器是有意义的，但我看不到它扩展到长度，而只是使用CSS。如果你需要一个替代方案，就使用我前面提到的工作方法。给这个一个镜头。只给第二个div宽度auto，如果我给auto它不工作，如果我给100%，我得到水平滚动bartry

width:auto

并添加边距sideOffexedDiv:21px；代码rulez，您不必像css一样，在4个操作系统、7个浏览器中对设计进行可视化验证（和修复）。但如果有跨浏览器css解决方案，我肯定会感兴趣：）建议您通过代码来实现吗？这是一个正确的方法/答案吗？…正在寻求专家的反馈new@gauravjain这取决于，如果父元素的宽度是固定的，则可以设置固定宽度，这个解决方案适用于每个浏览器，我使用jQuery，因为这个问题有一个标签。当然…thx…如果应该这样做的话，我希望通过代码来做…我只想做得对…thx在小提琴中还是在应用到你的页面时？什么浏览器？你能复制你的代码的js提琴吗？你的提琴工作正常。当我用小提琴写代码时，它就工作了。没有水平滚动。然而，在我的FF中，它断了。我会调查更多。请在明天之前查看我的更新。我一定会更新。我想我正在处理这个问题。你是对的。多谢！！！！

<div id='wrapper'>
    <div id='first'/>
       first
    </div>
    <div id='second'/>
       second
    </div>    
</div>

#first {
   width: 20px;
   height:50px; // height is set for test
   background-color: red    
}

#second {
   height:50px;
   background-color: blue;
}

#wrapper div {
   float:left
}

$(window).resize(function(){
   var r = $('#wrapper').width() - 20;
   $('#second').width(r)
}).resize()

<div id='wrapper'>
    <div id='first'/>
       &nbsp;
     </div>
    <div id='second'/>
       second
     </div>    
</div>    

#first {
   width: 20px;
   float: left;
}