使用jQuery和CSS來製作液體佈局

目前我有一個主要的產品圖像與右側的alt圖像，我使用jquery來計算我的主圖像的高度，然後didvide我的ALT圖像到到達那裏的高度，因爲我不知道會有多少小球。我的問題是，我怎樣才能採取同樣的方法，但使整個佈局變得流暢。這裏是我的小提琴http://jsfiddle.net/r7MgY/7112/使用jQuery和CSS來製作液體佈局

任何幫助，將不勝感激

來源

2011-06-28 Lawrence

你是什麼意思的佈局液體？ –

隨着屏幕尺寸變大，所有元素的寬度和高度都會增加/增大 – Lawrence

這裏的問題究竟是什麼？我只注意到，保持大拇指的div在thimbnail和div的關閉之間存在間隙，並且在更改窗口高度時高度不會改變。這是你擔心嗎？ –

有很多事情會在這裏的鏈接...你需要知道的第一件事是，邊框有助於元素的總寬度。所以，如果你有一個帶有兩個子div的父DIV，子div不能都是width = 50％，並且有一個邊界並且沒有包裝就會浮動。我建議在您的.photoWrap和.altWrap和.assestWrap上放置一個臨時邊框：1px純紅色（或其他顏色），以便您可以看到尺寸的變化。

你需要知道的第二件事是，通過設置％寬度相對於它們在容器所以，如果你有：

<div id="A"> 
    <div id="B">...</div> 
    <div id="C"> 
     <div class="D">...</div> 
    </div> 
</div>

並設置.D {寬度：20％; }這意味着D的寬度是C的20％，這已經是A的百分比。

現在需要的另一件事是當您在圖像上僅設置寬度時，圖像的寬高比將保持不變。這是什麼意思，如果圖像不是方形的，你將有一個比你的主圖像更高的正確的div。

而你設置了一個保證金：3％這就是爲什麼你的div之間有一個空格

來源

2011-07-08 03:09:34 kasdega

使用jQuery和CSS來製作液體佈局

回答

相關問題