2009-10-07 164 views
1

我在寬度爲880px的包裝div裏面有兩個div。在固定寬度的div裏面的流體寬度

第一div包含其可以是任何寬度的圖像,我想第二寬度與它成比例,即:

1區= 300像素 2區= 580(長)< <這個div縮放以適合母公司

在第二個div上設置100%的寬度將忽略父div上的固定寬度。

這是可能的只使用CSS或我必須使用javascript/jquery(jquery已經加載,所以它不是太麻煩)?

謝謝!

+0

如果父母是固定的,爲什麼不讓孩子固定呢? – 2009-10-07 15:17:10

+0

你想要兩列,對不對?一個收縮到它的內容,以及一個佔用寬度的休息嗎? – Eric 2009-10-07 15:18:11

回答

1

使用CSS,您只能設置與元素內容直接相關的維度,如果它的父項,字體大小或屏幕分辨率相同,而不與其兄弟的維度相關。*這意味着,爲了使第二個塊的寬度與圖像的寬度相同,它應該從父級繼承寬度,或者使其動態設置。例如:

#wrapper { 
    float: left; 
} 

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

float屬性#wrapper塊上使得其寬度適應其內容。 #fits_img塊的寬度默認爲auto100%(因爲它是div元素),所以其寬度將適合#wrapper,因此間接相對於圖像的寬度。

如果你不能讓#wrapper元素浮動,你也可以反映與jQuery的寬度像這樣:

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

*請注意,也有絕對的單位,比如「釐米」,但他們相對無用而且很少使用。

1

複製/粘貼下面的代碼,並試圖改變圖像的寬度,看看會發生什麼。

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