Question

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

第一个div包含一个可以是任何宽度的图像，我想要用它来缩放第二个宽度，即：

Div 1 = 300px Div 2 = 580px＆lt;＆lt;这个div缩放以适合父div。

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

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

谢谢！

Answer 1

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

#wrapper {
    float: left;
}

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

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

如果你不能使#wrapper元素浮动，你也可以使用jQuery镜像宽度，如下所示：

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

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

Answer 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>

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

2 个答案: