Css 我如何将滑雪板产品与名称和价格联系起来？
我正在为学校做一个项目，不知道如何将滑雪板图片与产品名称和价格排成一行。我需要他们排队，这样看起来就像是一个网站上的产品页面。我怎么排队呢Css 我如何将滑雪板产品与名称和价格联系起来？,css,html,center,Css,Html,Center,我正在为学校做一个项目，不知道如何将滑雪板图片与产品名称和价格排成一行。我需要他们排队，这样看起来就像是一个网站上的产品页面。我怎么排队呢 <!--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.
<!--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>
滑雪板
伯顿定制飞行V550美元
伯顿夏洛克500美元
所罗门脉搏270美元
所罗门协议700美元
h3 {
line-height: 300px;
width: 300px;
}
#products > div {
height: 300px;
width: 300px;
}
当然，把它放在你的CSS里。否则你就得设计每个div和h3的样式，这将是一个更大的工作量。我强烈推荐一个表格。代码可能是：
<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>
滑雪板1
100美元
滑雪板2
200美元
滑雪板3
300美元
显然，只需使用滑雪板的实际名称和价格，就可以根据需要添加更多的
#products>divwidth=100%