我將如何將雪板產品與名稱和價格對齊？

我正在爲學校做一個項目，無法弄清楚如何將產品和價格的名稱與滑雪板圖片一起排列。我需要他們排隊，所以它看起來像一個網站的產品頁面，我將如何排列這一切？我將如何將雪板產品與名稱和價格對齊？

<!--Doctype tells the browser the rules to follow--> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<!--First required tag--> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<!--The head is just information--> 
<!--The title is what is shown on the tab bar on the browser--> 
<title>Snowboards</title> 
<!--Meta is data about the data. This is the english character set--> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<link rel="stylesheet" type="text/css" href="ski store.css"/> 
</head> 
<!--The body is what is shown on the browser--> 
<body> 

<div id="products"> 
<div> 
<img src="burton1.jpeg" style="float: left;"/> 
</div> 
<div> 
<img src="burton2.jpeg" style="float: left;"/> 
</div> 
<div> 
<img src="soloman1.jpg" style="float: left; height: 300px;"/> 
</div> 
<div> 
<img src="soloman2.jpg" style="float: left; height: 300px;"/> 
</div> 
</div> 
<div style="float: left;"> 
<h3 >Burton Custom Flying V</br>$550</h3> 
</div> 
<div style="float: left;"> 
<h3 >Burton Sherlock</br>$500</h3> 
</div> 
<div style="float: left;"> 
<h3 >Salomon Pulse</br>$270</h3> 
</div> 
<div style="float: left;"> 
<h3 > Salomon Protocol</br>$700</h3> 
</div> 





<!--Always the last two tags--> 
</body> 
</html>

來源

2013-12-12 KStahljr

@codehorse現在有這個代碼的CSS。這就是現在。 – KStahljr

@codehorse它的菜單，我沒有包括，因爲它不是我想要做的。 – KStahljr

一個簡單的方法，你可以讓他們排隊是這樣

h3 { 
    line-height: 300px; 
    width: 300px; 
    } 

#products > div { 
    height: 300px; 
    width: 300px; 
}

根據你想要的調整像素。

把它放入你的CSS當然。否則，你必須對每個div和h3進行設計，這將會有更多的工作。

來源

2013-12-12 02:31:48 CRABOLO

這並沒有工作....這一切都搞砸了...... – KStahljr

這也影響了容器股利，嘗試'#products> div' 但我會建議添加一個CSS類到所有包含產品圖片的div – YemSalat

不用擔心:) @KStahljr擺脫了內聯的CSS，它會覆蓋你放入CSS文件的樣式。 – YemSalat

我會極力推薦這個表。該代碼可能是：

<table> 
<tr> 
<td><img src=snowboard1.jpg width=100%></td> 
<td><img src=snowboard2.jpg width=100%></td> 
<td><img src=snowboard3.jpg width=100%></td> 
</tr> 
<tr> 
<td><h1 align=center>The Snowboard 1</h1><br><h1 align=center>$100</h1></td> 
<td><h1 align=center>The Snowboard 2</h1><br><h1 align=center>$200</h1></td> 
<td><h1 align=center>The Snowboard 3</h1><br><h1 align=center>$300</h1></td> 
</tr> 
</table>

顯然，僅僅使用滑雪板的實際名稱和價格，並在需要可以添加更多的<td>的。

來源

2013-12-12 02:51:37 dunnmifflsys

這個工作除了現在其中一塊電路板比它需要的小得多以外。 – KStahljr

將'width = 100％'添加到img標籤。或者獲得滑雪板的更大圖像。 – dunnmifflsys

我會非常強烈地推薦學習CSS，對原文的作者和這個答案的作者都是如此。 – YemSalat

我將如何將雪板產品與名稱和價格對齊？

回答

相關問題