Question

我正在为学校做一个项目，无法弄清楚如何用产品名称和价格排列滑雪板图片。我需要他们排队，所以它看起来像一个网站的产品页面我会如何排列这一切？

<!--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>

Answer 1

一种简单的方法就是让它们排成一行就是这样做

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

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

根据您的需要调整像素。

当然把它放在你的CSS中。或者你必须设置每个div和h3的样式，这将是更多的工作。

Answer 2

我非常高兴，强烈推荐一张桌子。代码可能是：

<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>。

如何根据名称和价格排列雪板产品？

2 个答案: