在固定宽度的div里面的流体宽度

Question

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

第一div包含其可以是任何宽度的图像，我想第二宽度与它成比例，即：

1区= 300像素 2区= 580（长）< <这个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()); 
}); 

---

*请注意，也有绝对的单位，比如“厘米”，但他们相对无用而且很少使用。

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>