固定宽度的 div 内的 CSS 流体宽度答案

【问题标题】：CSS Fluid Width inside div with fixed width固定宽度的 div 内的 CSS 流体宽度
【发布时间】：2009-10-08 01:07:52
【问题描述】：

我在宽度为 880 像素的包装 div 中有两个 div。

第一个 div 包含一个可以是任何宽度的图像，我希望第二个宽度可以随它缩放，即：

第 1 格 = 300 像素 Div 2 = 580px

在第二个 div 上设置 100% 的宽度会忽略父 div 上的固定宽度。

这可能只使用 css 还是我必须使用 javascript/jquery（jquery 已经加载，所以它不是太大的麻烦）？

谢谢！

【问题讨论】：

如果父母是固定的，为什么不让孩子也固定呢？
你想要两列，对吧？一个缩小到其内容，一个占据其余宽度？

标签： html css xhtml

【解决方案1】：

使用 CSS，您只能设置与元素内容直接相关的尺寸，如果是其父元素、字体大小或屏幕分辨率，则不能设置其兄弟元素的尺寸。*这意味着，在为了使第二个块与图像的宽度相同，它应该从父级“继承”宽度，或者动态设置它。例如：

#wrapper {
    float: left;
}

<div id="wrapper">
    <img id="image" src="…" alt="" />
    <div id="fits_img">…</div>
</div>

#wrapper 块上的float 属性使其宽度适合其内容。 #fits_img 块的宽度默认为auto 或100%（因为它是div 元素），因此它的宽度将适合#wrapper，因此与图像的宽度间接相关。

如果你不能让#wrapper元素浮动，你也可以像这样用jQuery镜像宽度：

$(document).ready(function()
{
    $('#fits_img').width($('#image').width());
});

* 请注意，也有绝对单位，例如“cm”，但它们相对没用，很少使用。

【讨论】：

【解决方案2】：

复制/粘贴下面的代码并尝试更改图像的宽度，看看会发生什么。

<div style="width:880px;">
    <img style="float:left;margin-right:10px;width:600px;height:80px;" src="whatever" />
    <div>a sadasd wqe sad asdqwe qweqwedasdasdqwe qwe qwe </div>
    <div style="clear:both;"></div>
</div>

【讨论】：