My output overlayed over desired output :
我实际上是在尝试复制此 assignment 的网页输出.网页中使用的图片是here .
在过去的几个小时里，我一直在尝试用头撞它，但我就是想不通出了什么问题。
组成列的 block 元素向下交错排列，如图所示。唯一调整垂直间距的代码将其调整了 20pts，这是规范的要求。
我也不确定如何让它像在输出中那样延伸到容器之外。在我的文件版本中，它停在容器的末尾。
我是不是完全误解了这里需要做什么？这是我完全熟悉的其他错误吗？
#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;
}<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)
</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>最佳答案
The block elements that make up the columns are staggered downwards as you can see in the picture. The only code that adjusts the vertical spacing adjusts it by 20pts, which is the requirement by the specification.
我还不能发表评论(需要 >49 个代表//好的，在发布这个答案后赢得了他们)，你能解释一下吗？对我来说，它看起来像图片中的样子(或者我看错了元素)。
I'm also not sure how to get it to extend past the container as it does in the output. In my version of the file, it stops at the end of the container.
您可以通过在 #container 元素中添加底部边距轻松实现这一点:
#container {
background-color: #EEEEEE;
border-radius: 20px;
box-shadow: 5px 5px 5px gray;
/* margin: top right bottom left; */
margin: 0px auto 20px auto;
width: 800px;
}
#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: 0px auto 20px 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;
}<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)
</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>关于html - HTML/CSS 的间距问题。为什么会发生这种情况，我该如何解决？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34924548/