使用HTML和CSS實現特定的設計目標

-2

我在實現特定設計目標方面存在問題，我希望你能幫助我。使用HTML和CSS實現特定的設計目標

我取得了PS的圖片，我希望向你解釋什麼，我想：

Example 1

這張照片的每一個部分應該是在一個單獨的標籤（例如DIV），並放置像這個。標誌應放置在大圖的頂部，邊緣之間只有一點點的空間。名字放在圖片底部或中間的位置（無論看起來最好）。

標題（新的911）與大圖片的頂部一起放置，描述在中間（總是中間，文本的長度將變化），並且頁腳（信息信息）與底部對齊圖片。

難道這能幫助我嗎？

我有一些代碼，但它不能完全按計劃工作。這裏是我的HTML：

<div class="content"> 
    <div class="left"> 
    <div class="poster"> 
     <div class="poster_img"> 
     <img src="https://lh6.googleusercontent.com/-cC6WK7FOx_g/AAAAAAAAAAI/AAAAAAAAAAA/QQ41pWU9UUQ/s100-c-k/photo.jpg" height="50" /> 
     </div> 
     <div class="poster_name">Porsche</div> 
    </div> 
    <div class="img"> 
     <img src="http://i1.ytimg.com/vi/k7dEsMCFfFw/mqdefault.jpg" width="220" /> 
    </div> 
    </div> 
    <div class="right"> 
    <div class="header">The new Porsche 911 Turbo. Breaking new ground.</div> 
    <div class="main">With the new Porsche 911 Turbo, we have once again questioned everything and started from scratch. We pushed the boundaries...</div> 
    <div class="footer"> 
    <div class="info1">info</div> 
    <div class="info2">info</div> 
    </div> 
</div>

這裏是我的CSS：

.content { 
    position: relative; 
    clear: all; 
    margin: 5px; 
    margin-top: 10px; 
} 

.left { 
    display: table-cell; 
} 

.poster { 
    position: relative; 
    margin-bottom: -50px; 
    height: 50px; 
} 

.poster_img { 
    display: table-cell; 
    position: absolute; 
} 

.poster_name { 
    display: table-cell; 
    padding-left: 52px; 
    font-size: 15px; 
} 

.img {} 

.right { 
    display: table-cell; 
    padding-left: 10px; 
} 

.header {} 

.main {} 

.footer {} 

.info1 { 
    display: table-cell; 
} 

.info2 { 
    display:table-cell; 
    padding-left: 25px; 
}

希望你能幫助我在這裏！ :)

Aleksander。並不複雜

來源

2013-07-31 Aleksander

你應該可以用'position：absolute'做所有事情。只要確保容器具有「相對」位置即可工作。這個問題總體上要求太多的幫助。 –

給我幾分鐘，讓我看看我是否可以讓這看起來很好。 – Keith

@itcouldevenbeaboat不，它不。它只有一定的位置：靜態;絕對會工作得很好。 – MightyPork

與CSS定位的元素，因爲它似乎（如果你的設計概念是好的）。

我喜歡用網格來清晰地定位元素。但是大多數時間position: absolute;與父元素上的position: relative;就足夠了。

閱讀關於這個位置：Absolute Positioning Inside Relative Positioning

也試圖找到具有相似的設計一個網站，並探索的源泉。看起來保時捷將是一個開始的好地方。也有很多「Design Inspiration」的網站，你可能會發現你在找什麼。

好運。

來源

2013-07-31 16:49:44

而不是進入定位的深度，你可能想要考慮一個簡單的浮動與清晰的組合。通常工作得很好 - 給出正確的堆棧順序。

來源

2013-07-31 17:12:10

使用HTML和CSS實現特定的設計目標

回答

相關問題