我在寬度爲880px的包裝div裏面有兩個div。在固定寬度的div裏面的流體寬度
第一div包含其可以是任何寬度的圖像,我想第二寬度與它成比例,即:
1區= 300像素 2區= 580(長)< <這個div縮放以適合母公司
在第二個div上設置100%的寬度將忽略父div上的固定寬度。
這是可能的只使用CSS或我必須使用javascript/jquery(jquery已經加載,所以它不是太麻煩)?
謝謝!
我在寬度爲880px的包裝div裏面有兩個div。在固定寬度的div裏面的流體寬度
第一div包含其可以是任何寬度的圖像,我想第二寬度與它成比例,即:
1區= 300像素 2區= 580(長)< <這個div縮放以適合母公司
在第二個div上設置100%的寬度將忽略父div上的固定寬度。
這是可能的只使用CSS或我必須使用javascript/jquery(jquery已經加載,所以它不是太麻煩)?
謝謝!
使用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());
});
*請注意,也有絕對的單位,比如「釐米」,但他們相對無用而且很少使用。
複製/粘貼下面的代碼,並試圖改變圖像的寬度,看看會發生什麼。
<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>
如果父母是固定的,爲什麼不讓孩子固定呢? – 2009-10-07 15:17:10
你想要兩列,對不對?一個收縮到它的內容,以及一個佔用寬度的休息嗎? – Eric 2009-10-07 15:18:11