2011-12-05 156 views
0

我有一個要求,其中的前景是如圖所示的附加的圖像Project Outline Image替代使用CSS

我已經完成了通過利用在HTML表格和使用CSS樣式的任務在下面的設計。

標準是一行中的圖像幾乎相同(即兩個圖像),並且每行的內容都會發生變化。所以每行的內容都不相同,但每行的圖像保持不變。僅供參考,會有多個行數。除了使用表格之外,實施諸如設計的最佳實踐是什麼,其中它也應該靈活地改變內容。或者使用表格是最好的選擇。從專業人士

建議表示讚賞

問候

+0

就像下面稍微留意-SpaceBeers解決方案是偉大的,但我在你做的是去除其他職位注意到,你沒有;不想絕對positining - 喬丹(和我)以下兩個答案不要使用絕對定位。如果你通過我的答案中的floattutorials鏈接工作(它實際上並不需要那麼長時間),它會告訴你如何做到這一切,更重要的是,瞭解它! – JorgeLuisBorges

回答

2

我不希望它爲你寫的,但我做了一個快速模擬一個讓您看看 - http://jsfiddle.net/spacebeers/TAJdw/

你不想使用表格比表格日期以外的任何了。你花更多時間研究CSS。

看看我的例子。這是內容容器的一個實例。你想從那裏做什麼是看他們連續兩個。爲.container類構建CSS,然後複製.contentContainer的另一個實例並查看獲得的結果。

如果您願意,我很樂意提供幫助,但總是有好的方法自己解決。你會在這裏得到更好的答案,並避免不必要的問題downvoting。

+0

感謝您的所有評論和鏈接,你們大多數人已經寫了一個例子,一個接一個地產生塊。但我的問題是我需要垂直和水平重複內容和圖像 – 125369

+0

我已經更新了我的示例。你只需要將.container div複製到一個新行中 - http://jsfiddle.net/spacebeers/TAJdw/1/ – SpaceBeers

+0

感謝SpaceBeers – 125369

0

我會考慮使用一個背景圖片的樣式,一個div以便與所有你需要做的就是把那個相同的圖像的每一行然後你可以定位外部div來讓它看起來是正確的,儘管表格不是構建仍然工作的網頁的最有效方式。

2

通常建議使用純CSS來處理像這樣的事情,而不是表格。表格會導致頁面渲染速度變慢,因爲內容需要在渲染引擎正確繪製之前加載。

嘗試像this

0

像梅茨說 - 你需要考慮重複的內容 - 和學習浮動。我真的勸通過這個網站的工作

http://css.maxdesign.com.au/floatutorial/

它會教你的div設計的所有的基本知識。

在此期間 - 這裏大概是你的。我已經添加了背景顏色,並且填充了所有高度和寬度,因爲它們沒有指定,但它應該讓您開始。

如果您看一下html,我已經註釋了什麼只是重複的早期內容。

http://jsfiddle.net/zandergrin/k8EsP/3/