怎样实现两个div并排，并手动拉伸左边DIV宽度的时候,另一边DIV宽度缩小相应宽度。

Posted 2023-04-15

参考技术A 。。。如果非要这样，你干嘛不用表格，还手动拉伸！

DIV是如果不是用JS控制是无法用鼠标操作的！

div是一个种方法，不是目的。。。怎么方便就用哪种呗。。。不要把CSS妖魔化了！～

<div style=width:20%;float:left;></div>
<div style=width:80%f loat:left;></></div>

不是也一样的吗？ 参考技术B JS控制 参考技术C 只能JS控制。。

在固定宽度 div 之间拉伸中心 div 的问题

【中文标题】在固定宽度 div 之间拉伸中心 div 的问题

【英文标题】：Problems with stretching center div between fixed width divs

【发布时间】：2013-05-04 12:54:01

【问题描述】：

我有 3 个内联 div。其中 2 个设置了 px 宽度（在 div 之外）。当窗口调整时，我希望中心 div 填充两个外部 div 之间的所有空间。

这是我尝试的一个示例： http://jsfiddle.net/3ZPHT

    #div_1 
    float: left;
    background: red;
    display: inline-block;
    width: 300px;
    height: 50px;
    text-align: left;
#div_2 
    overflow: hidden;
    background: green;
    display: inline-block;
    height: 50px;
    text-align: center;

#div_3 
    float: right;
    display: inline-block;
    background: blue;
    width: 350px;
    text-decoration: underline;
    font-weight: bold;
    color: white;
    height: 50px;
    text-align: right;

这是我希望它看起来像的一个想法： http://jsfiddle.net/Q8eVz

非常感谢任何帮助，谢谢。

【问题讨论】：

那么你的例子有什么问题？

你的意思是像jsfiddle.net/ExplosionPIlls/3ZPHT/2？

是的，就是这样。我忽略了html，只看了css。我没有意识到中间 div 应该列在 html 中的外部 div 之后。感谢您的帮助。

【参考方案1】：

演示： http://jsfiddle.net/3ZPHT/1/

HTML：

<div>
    <div id="div_1">LEFT COL STATIC WIDTH 300px</div>
    <div id="div_3">RIGHT COL STATIC WIDTH 350px</div>
    <div id="div_2">CENTER COL DYNAMIC WIDTH</div>
</div>

CSS：

#div_1 
    float: left;
    background: red;
    display: inline-block;
    width: 300px;
    height: 50px;
    text-align: left;
#div_2 
    overflow: hidden;
    background: green;
    display: block;
    height: 50px;
    text-align: center;

#div_3 
    float: right;
    display: inline-block;
    background: blue;
    width: 350px;
    text-decoration: underline;
    font-weight: bold;
    color: white;
    height: 50px;
    text-align: right;

【讨论】：

非常感谢。我一直在与 CSS 作斗争。我什至没有想过改变 html 并将中间 div 放在外部 div 之后。