div inline 如何做到右边div宽度随左边div宽度增加而自适应减小，但是不换行？

Posted 2023-04-15

想做两个div，并排放置，左边的宽度不是固定的，有最小值，但是有可能增加宽度（比如里面文本比较多但是又不希望换行），希望右侧的div的宽度随着左边的增大而自适应的减小，只要保证两个div在一列就行，应该如何做？
用js也是可以的，求做法？

左边的DIVfloat:left;宽度不用写，自适应，右边的DIVoverflow:hidden; zoom:1;就能实现左右自适应。如果两个DIV想要有点距离，可以给左边的div加个margin-right:10px;追问

小弟想做的东西有好几排，想要每排内部是对齐的，可是每排右边的div的height都不一样，如果左边都float:left;的话，怎么实现每排对齐呢？
P.S zoom:1是只有IE才能用的效果，小弟想兼容一下别的浏览器，求大神赐教！

追答

外面再加一层做为每一排的父层，其实zoom:1是给IE的，但overflow:hidden;是给IE以外的浏览器的。不存在兼容性问题的。

参考技术A $(function()
var _c_width = $(".container").innerWidth();
var _leftWidth = $(".left").outerWidth();
$(".right").css("width", _c_width - _leftWidth);
);
//获取最外层container的宽度
//获取左侧Left的宽度
//将两值相减后的值，赋给右侧Right
//样式不用说了吧，不要定义Left,Right宽度，只定义float:left;
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div> 参考技术B 最简单就是百度，左右自适应代码这几个关键词，你就找到答案了。追问

大哥我要是能百度到就不在这儿提问了。。

参考技术C 这个必须用js来做啦

css 两列布局 右边固定 左边可伸缩 但是有最小宽度 如何实现？

至少也给出个类似于百度的搜索结果页的布局：右边块固定大小，左边块也固定大小，右边块向右边浮动。拉伸变动浏览器的大小，能改变左右2块的距离，中间空白 可伸缩。如何实现。看百度的搜索结果页，就能知道什么效果了。

参考技术A 你要留在中间的给他加个css样式
样式就用.BD表示
就写
.BDmargin:0px
auto;width:400px;height:300px
然后给你的右边那个弄个绝对定位
.Bdposition:absolute;right:0px;top:0px
把这两个样式弄进去就ok了
右边漂浮的东西