我实际上是在尝试复制此assignment的网页输出。网页中使用的图片为here。
问题是每个元素之间的间距。它只是有点偏离，我无法弄清楚原因。每个之间应该有20pt的垂直间距。我相信
.reviewer-info {
padding-bottom: 20pt;
}
应该已经适当实施，但显然仍然存在巨大差异。我有什么遗失的吗？
My output overlayed over desired output
#banner {
height: 50px;
background-image: url(https://webster.cs.washington.edu/images/rancidbannerbg.png);
background-repeat: repeat-x;
}
#banner img {
display: block;
margin-left: auto;
margin-right: auto;
}
body {
background-image: url(https://webster.cs.washington.edu/images/moviebg.png);
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
margin: 0px;
padding: 0px;
}
#column-left, #column-right {
margin-right: 2%;
width: 47%;
}
#column-left {
float: left;
margin-left: 2%;
}
#column-right {
float: right;
}
#container {
background-color: #EEEEEE;
border-radius: 20px;
box-shadow: 5px 5px 5px gray;
margin: auto;
width: 800px;
}
#date {
background-color: #A2B964;
clear: both;
margin-bottom: 0;
padding: 5px;
text-align: center;
}
h1, .reviewer-text {
font-family: Georgia, "Times New Roman", serif;
}
h1 {
font-size: 24pt;
font-weight: bold;
text-align: center;
text-shadow: 3px 3px #999999;
}
#logo {
background-image: url(https://webster.cs.washington.edu/images/rottenlargebg.png);
background-repeat: repeat-x;
height: 83px;
font-size: 48pt;
font-weight: bold;
color: red;
}
#logo img {
vertical-align: bottom;
}
.publication {
font-style: italic;
}
#reviews {
width: 550px;
}
.reviewer-info {
padding-bottom: 20px;
}
.reviewer-info img, .reviewer-text img {
float: left;
margin-right: 5px;
}
.reviewer-text {
background-color: #FFFFFF;
border: 2px solid #CCCCCC;
border-radius: 20px;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 8px;
padding-right: 8px;
}
#general-overview {
width: 250px;
background-color: #A2B964;
font-family: Arial, Helvetica, sans-serif;
float: right;
}
#general-overview dt {
font-weight: bold;
margin-top: 10pt;
padding-left: 10pt;
}
#general-overview dd {
padding-left: 10pt;
padding-right: 10pt;
}
#general-overview ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#validators {
bottom: 0px;
right: 0px;
position: fixed;
opacity: 0.5;
}<!DOCTYPE html>
<html>
<head>
<title>TMNT - Rancid Tomatoes</title>
<meta charset="utf-8" />
<link href="movie.css" type="text/css" rel="stylesheet" />
<link rel="icon" type="image/gif" href="rotten.gif" />
</head>
<body>
<div id = "banner">
<img src="https://webster.cs.washington.edu/images/rancidbanner.png" alt="Rancid Tomatoes" />
</div>
<h1>TMNT (2007)</h1>
<div id="container">
<div id="general-overview">
<div>
<img src="https://webster.cs.washington.edu/images/overview.png" alt="general overview" />
</div>
<dl>
<dt>STARRING</dt>
<dd>Patrick Stewart <br /> Mako <br /> Sarah Michelle Gellar <br /> Kevin Smith</dd>
<dt>DIRECTOR</dt>
<dd>Kevin Munroe</dd>
<dt>RATING</dt>
<dd>PG</dd>
<dt>THEATRICAL RELEASE</dt>
<dd>Mar 23, 2007</dd>
<dt>MOVIE SYNOPSIS</dt>
<dd>After the defeat of their old arch nemesis, The Shredder, the Turtles have grown apart as a family.</dd>
<dt>MPAA RATING</dt>
<dd>PG, for animated action violence, some scary cartoon images and mild language</dd>
<dt>RELEASE COMPANY</dt>
<dd>Warner Bros.</dd>
<dt>RUNTIME</dt>
<dd>90 mins</dd>
<dt>GENRE</dt>
<dd>Action/Adventure, Comedies, Childrens, Martial Arts, Superheroes, Ninjas, Animated Characters</dd>
<dt>BOX OFFICE</dt>
<dd>$54,132,596</dd>
<dt>LINKS</dt>
<dd>
<br />
<ul>
<li><a href="http://www.ninjaturtles.com/">The Official TMNT Site</a></li>
<li><a href="http://www.rottentomatoes.com/m/teenage_mutant_ninja_turtles/">RT Review</a></li>
<li><a href="http://www.rottentomatoes.com/">RT Home</a></li>
</ul>
</dd>
</dl>
</div>
<div id="reviews">
<div id="logo">
<img src="https://webster.cs.washington.edu/images/rottenlarge.png" alt="Rotten" />
33%
</div>
<div id="column-left">
<p class="reviewer-text">
<img src="https://webster.cs.washington.edu/images/rotten.gif" alt="Rotten" />
<q>Ditching the cheeky, self-aware wink that helped to excuse the concept's inherent corniness, the movie attempts to look polished and 'cool,' but the been-there animation can't compete with the then-cutting-edge puppetry of the 1990 live-action movie.</q>
</p>
<p class="reviewer-info">
<img src="https://webster.cs.washington.edu/images/critic.gif" alt="Critic" />
Peter Debruge <br />
<span class="publication">Variety</span>
</p>
<p class="reviewer-text">
<img src="https://webster.cs.washington.edu/images/fresh.gif" alt="Fresh" />
<q>TMNT is a fun, action-filled adventure that will satisfy longtime fans and generate a legion of new ones.</q>
</p>
<p class="reviewer-info">
<img src="https://webster.cs.washington.edu/images/critic.gif" alt="Critic" />
Todd Gilchrist <br />
<span class="publication">IGN Movies</span>
</p>
<p class="reviewer-text">
<img src="https://webster.cs.washington.edu/images/rotten.gif" alt="Rotten" />
<q>It stinks!</q>
</p>
<p class="reviewer-info">
<img src="https://webster.cs.washington.edu/images/critic.gif" alt="Critic" />
Jay Sherman (unemployed)
<br />
</p>
<p class="reviewer-text">
<img src="https://webster.cs.washington.edu/images/rotten.gif" alt="Rotten" />
<q>The rubber suits are gone and they've been redone with fancy computer technology, but that hasn't stopped them from becoming dull.</q>
</p>
<p class="reviewer-info">
<img src="https://webster.cs.washington.edu/images/critic.gif" alt="Critic" />
Joshua Tyler <br />
<span class="publication">CinemaBlend.com</span>
</p>
<p class="reviewer-text">
<img src="https://webster.cs.washington.edu/images/rotten.gif" alt="Rotten" />
<q>This movie sucks because reasons.</q>
</p>
<p class="reviewer-info">
<img src="https://webster.cs.washington.edu/images/critic.gif" alt="Critic" />
T. Tally Nobias <br />
<span class="publication">objectivereviews.com</span>
</p>
</div>
<div id="column-right">
<p class="reviewer-text">
<img src="https://webster.cs.washington.edu/images/rotten.gif" alt="Rotten" />
<q>The turtles themselves may look prettier, but are no smarter; torn irreparably from their countercultural roots, our superheroes on the half shell have been firmly co-opted by the industry their creators once sought to spoof.</q>
</p>
<p class="reviewer-info">
<img src="https://webster.cs.washington.edu/images/critic.gif" alt="Critic" />
Jeannette Catsoulis <br />
<span class="publication">New York Times</span>
</p>
<p class="reviewer-text">
<img src="https://webster.cs.washington.edu/images/rotten.gif" alt="Rotten" />
<q>Impersonally animated and arbitrarily plotted, the story appears to have been made up as the filmmakers went along.</q>
</p>
<p class="reviewer-info">
<img src="https://webster.cs.washington.edu/images/critic.gif" alt="Critic" />
Ed Gonzalez <br />
<span class="publication">Slant Magazine</span>
</p>
<p class="reviewer-text">
<img src="https://webster.cs.washington.edu/images/fresh.gif" alt="Fresh" />
<q>The striking use of image and motion allows each sequence to leave an impression. It's an accomplished restart to this franchise.</q>
</p>
<p class="reviewer-info">
<img src="https://webster.cs.washington.edu/images/critic.gif" alt="Critic" />
Mark Palermo <br />
<span class="publication">Coast (Halifax, Nova Scotia)</span>
</p>
<p class="reviewer-text">
<img src="https://webster.cs.washington.edu/images/rotten.gif" alt="Rotten" />
<q>The script feels like it was computer generated. This mechanical presentation lacks the cheesy charm of the three live action films.</q>
</p>
<p class="reviewer-info">
<img src="https://webster.cs.washington.edu/images/critic.gif" alt="Critic" />
Steve Rhodes <br />
<span class="publication">Internet Reviews</span>
</p>
<p class="reviewer-text">
<img src="https://webster.cs.washington.edu/images/rotten.gif" alt="Rotten" />
<q>This movie is literally the worst movie ever. I'm not going to explain why. -10000000/10.</q>
</p>
<p class="reviewer-info">
<img src="https://webster.cs.washington.edu/images/critic.gif" alt="Critic" />
A. Rheal Kritik <br />
<span class="publication">Facade Inc.</span>
</p>
</div>
</div>
<p id="date">(1-10) of 88</p>
</div>
<div id="validators">
<a href="https://webster.cs.washington.edu/validate-html.php"><img src="https://webster.cs.washington.edu/images/w3c-html.png" alt="Valid HTML5" /></a><br />
<a href="https://webster.cs.washington.edu/validate-css.php"><img src="https://webster.cs.washington.edu/images/w3c-css.png" alt="Valid CSS" /></a>
</div>
</body>
</html>
答案 0 :(得分：0)
float:left;导致问题。两个更改可能会解决问题：
align="left"添加到图标img标记。更改img中.reviewer-text的CSS以使用margin和vertical-align: middle;
.reviewer-info img， .reviewer-text img { 保证金权利：4px; margin-bottom：4px; vertical-align：middle; }
这里是working JSFiddle。