图片正确地垂直对齐,但是文本只出现在第一张图片旁边。
我希望第一个h2和p出现在第一张图片旁边,第二个h2和p出现在第二张图片旁边。
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Yoko Lounge</title>
<meta name="author" content="Yoko"/>
<link href="styles.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Yoko Lounge</h1>
</div>
<div id="nav">
<ul>
<li class="current">Home</li>
<li>Forum</li>
<li>Members</li>
<li>Calendar</li>
<li>Logout</li>
</ul>
</div>
<div id="figs">
<img class="figure" src="bok-choi.jpg" alt="bok"/>
<h2>Best Plant</h2>
<p>This plant gives you health.</p>
<img class="figure" src="teriyaki.jpg" alt="teriyaki"/>
<h2>Teriyaki Health Plant</h2>
<p>This plant gives you health.</p>
</div>
</div>
</body>
</html>
CSS:
body {
background: url("dark-wood.jpg");
margin: 0px;
}
#wrapper {
width: 920px;
margin: 20px auto;
border: 2px solid black;
}
#header {
height: 130px;
background: url("header.jpg");
}
h1 {
text-indent: -9999px;
margin: 0px;
}
#nav {
background: #AEACA8;
color: #FFFFFF;
height: 30px;
}
#nav ul {
margin: 0px;
padding: 5px 0px 5px 30px;
}
#nav li {
display: inline;
margin-right: 40px;
}
#nav ul li.current, #nav ul li:hover {
color: black;
}
#content {
background: #FFFFFF;
color: black;
width: 100%;
}
#figs {
background: #FFFFFF;
color: black;
float: left;
width: 70%;
}
img.figure {
display: block;
border: 1px solid black;
margin: 20px 20px;
float: left;
}