html - 具有固定宽度的div内的CSS Fluid Width

Question

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

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

分区 1 = 300 像素 Div 2 = 580px << 此 div 缩放以适合父 div。

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

这是否可能只使用 css 还是我必须使用 javascript/jquery(jquery 已经加载所以它不是太麻烦)？

谢谢!

Answer 1

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

#wrapper {
    float: left;
}

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

#wrapper block 上的float 属性使其宽度适合其内容。 #fits_img block 的宽度默认为 auto 或 100%(因为它是一个 div 元素)，所以它的宽度将适合 #wrapper，因此间接地相对于图像的宽度。

如果你不能使 #wrapper 元素 float ，你也可以像这样用 jQuery 镜像宽度:

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

---

* 请注意，也有像'cm'这样的绝对单位，但它们相对无用且很少使用。