0
My output overlayed over desired output：HTML/CSS的間距問題。爲什麼會發生這種情況，我該如何解決？
我基本上是試圖複製此assignment的網頁輸出。網頁中使用的圖片是here。
我已經試過在最近幾個小時內毆打我的頭，我只是無法弄清楚什麼是錯的。
構成列的塊元素向下錯位，如圖所示。調整垂直間距的唯一代碼將其調整20pts，這是規範的要求。
我也不知道如何讓它在輸出中延伸超過容器。在我的文件版本中，它停在容器的末尾。
我只是完全誤解了這裏需要做什麼？這是我完全熟悉的其他一些錯誤嗎？
#banner {
\t height: 50px;
\t background-image: url(https://webster.cs.washington.edu/images/rancidbannerbg.png);
\t background-repeat: repeat-x;
}
#banner img {
\t display: block;
\t margin-left: auto;
\t margin-right: auto;
}
body {
\t background-image: url(https://webster.cs.washington.edu/images/moviebg.png);
\t font-family: Arial, Helvetica, sans-serif;
\t font-size: 10pt;
\t margin: 0px;
\t padding: 0px;
}
#column-left, #column-right {
\t margin-right: 2%;
\t width: 47%;
}
#column-left {
\t float: left;
\t margin-left: 2%;
}
#column-right {
\t float: right;
}
#container {
\t background-color: #EEEEEE;
\t border-radius: 20px;
\t box-shadow: 5px 5px 5px gray;
\t margin: auto;
\t width: 800px;
}
#date {
\t background-color: #A2B964;
\t clear: both;
\t margin-bottom: 0;
\t padding: 5px;
\t text-align: center;
}
h1, .reviewer-text {
\t font-family: Georgia, "Times New Roman", serif;
}
h1 {
\t font-size: 24pt;
\t font-weight: bold;
\t text-align: center;
\t text-shadow: 3px 3px #999999;
}
#logo {
\t background-image: url(https://webster.cs.washington.edu/images/rottenlargebg.png);
\t background-repeat: repeat-x;
\t height: 83px;
\t font-size: 48pt;
\t font-weight: bold;
\t color: red;
}
#logo img {
\t vertical-align: bottom;
}
.publication {
\t font-style: italic;
}
#reviews {
\t width: 550px;
}
.reviewer-info {
\t padding-bottom: 20px;
}
.reviewer-info img, .reviewer-text img {
\t float: left;
\t margin-right: 5px;
}
.reviewer-text {
\t background-color: #FFFFFF;
\t border: 2px solid #CCCCCC;
\t border-radius: 20px;
\t padding-top: 8px;
\t padding-bottom: 8px;
\t padding-left: 8px;
\t padding-right: 8px;
}
#general-overview {
\t width: 250px;
\t background-color: #A2B964;
\t font-family: Arial, Helvetica, sans-serif;
\t float: right;
}
#general-overview dt {
\t font-weight: bold;
\t margin-top: 10pt;
\t padding-left: 10pt;
}
#general-overview dd {
\t padding-left: 10pt;
\t padding-right: 10pt;
}
#general-overview ul {
\t list-style: none;
\t margin: 0px;
\t padding: 0px;
}
#validators {
\t bottom: 0px;
\t right: 0px;
\t position: fixed;
\t opacity: 0.5;
}<div id = "banner">
\t <img src="https://webster.cs.washington.edu/images/rancidbanner.png" alt="Rancid Tomatoes" />
</div>
<h1>TMNT (2007)</h1>
<div id="container">
\t <div id="general-overview">
\t \t <div>
\t \t \t <img src="https://webster.cs.washington.edu/images/overview.png" alt="general overview" />
\t \t </div>
\t \t <dl>
\t \t \t <dt>STARRING</dt>
\t \t \t <dd>Patrick Stewart <br /> Mako <br /> Sarah Michelle Gellar <br /> Kevin Smith</dd>
\t \t \t <dt>DIRECTOR</dt>
\t \t \t <dd>Kevin Munroe</dd>
\t \t \t <dt>RATING</dt>
\t \t \t <dd>PG</dd>
\t \t \t <dt>THEATRICAL RELEASE</dt>
\t \t \t <dd>Mar 23, 2007</dd>
\t \t \t <dt>MOVIE SYNOPSIS</dt>
\t \t \t <dd>After the defeat of their old arch nemesis, The Shredder, the Turtles have grown apart as a family.</dd>
\t \t \t <dt>MPAA RATING</dt>
\t \t \t <dd>PG, for animated action violence, some scary cartoon images and mild language</dd>
\t \t \t <dt>RELEASE COMPANY</dt>
\t \t \t <dd>Warner Bros.</dd>
\t \t \t <dt>RUNTIME</dt>
\t \t \t <dd>90 mins</dd>
\t \t \t <dt>GENRE</dt>
\t \t \t <dd>Action/Adventure, Comedies, Childrens, Martial Arts, Superheroes, Ninjas, Animated Characters</dd>
\t \t \t <dt>BOX OFFICE</dt>
\t \t \t <dd>$54,132,596</dd>
\t \t \t <dt>LINKS</dt>
\t \t \t <dd>
\t \t \t \t <br />
\t \t \t \t <ul>
\t \t \t \t \t <li><a href="http://www.ninjaturtles.com/">The Official TMNT Site</a></li>
\t \t \t \t \t <li><a href="http://www.rottentomatoes.com/m/teenage_mutant_ninja_turtles/">RT Review</a></li>
\t \t \t \t \t <li><a href="http://www.rottentomatoes.com/">RT Home</a></li>
\t \t \t \t </ul>
\t \t \t </dd>
\t \t </dl>
\t </div>
\t <div id="reviews">
\t \t <div id="logo">
\t \t \t <img src="https://webster.cs.washington.edu/images/rottenlarge.png" alt="Rotten" />
\t \t \t 33%
\t \t </div>
\t \t <div id="column-left">
\t \t \t <p class="reviewer-text">
\t \t \t \t <img src="https://webster.cs.washington.edu/images/rotten.gif" alt="Rotten" />
\t \t \t \t <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>
\t \t </p>
\t \t <p class="reviewer-info">
\t \t \t <img src="https://webster.cs.washington.edu/images/critic.gif" alt="Critic" />
\t \t \t Peter Debruge <br />
\t \t \t <span class="publication">Variety</span>
\t \t </p>
\t \t \t <p class="reviewer-text">
\t \t \t \t <img src="https://webster.cs.washington.edu/images/fresh.gif" alt="Fresh" />
\t \t \t \t <q>TMNT is a fun, action-filled adventure that will satisfy longtime fans and generate a legion of new ones.</q>
\t \t \t </p>
\t \t \t <p class="reviewer-info">
\t \t \t \t <img src="https://webster.cs.washington.edu/images/critic.gif" alt="Critic" />
\t \t \t \t Todd Gilchrist <br />
\t \t \t \t <span class="publication">IGN Movies</span>
\t \t \t </p>
\t \t \t <p class="reviewer-text">
\t \t \t \t <img src="https://webster.cs.washington.edu/images/rotten.gif" alt="Rotten" />
\t \t \t \t <q>It stinks!</q>
\t \t \t </p>
\t \t \t <p class="reviewer-info">
\t \t \t \t <img src="https://webster.cs.washington.edu/images/critic.gif" alt="Critic" />
\t \t \t \t Jay Sherman (unemployed)
\t \t \t </p>
\t \t \t <p class="reviewer-text">
\t \t \t \t <img src="https://webster.cs.washington.edu/images/rotten.gif" alt="Rotten" />
\t \t \t \t <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>
\t \t \t </p>
\t \t \t <p class="reviewer-info">
\t \t \t \t <img src="https://webster.cs.washington.edu/images/critic.gif" alt="Critic" />
\t \t \t \t Joshua Tyler <br />
\t \t \t \t <span class="publication">CinemaBlend.com</span>
\t \t \t </p>
\t \t \t <p class="reviewer-text">
\t \t \t \t <img src="https://webster.cs.washington.edu/images/rotten.gif" alt="Rotten" />
\t \t \t \t <q>This movie sucks because reasons.</q>
\t \t \t </p>
\t \t \t <p class="reviewer-info">
\t \t \t \t <img src="https://webster.cs.washington.edu/images/critic.gif" alt="Critic" />
\t \t \t \t T. Tally Nobias <br />
\t \t \t \t <span class="publication">objectivereviews.com</span>
\t \t \t </p>
\t \t </div>
\t \t <div id="column-right">
\t \t \t <p class="reviewer-text">
\t \t \t \t <img src="https://webster.cs.washington.edu/images/rotten.gif" alt="Rotten" />
\t \t \t \t <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>
\t \t </p>
\t \t <p class="reviewer-info">
\t \t \t <img src="https://webster.cs.washington.edu/images/critic.gif" alt="Critic" />
\t \t \t Jeannette Catsoulis <br />
\t \t \t <span class="publication">New York Times</span>
\t \t </p>
\t \t \t <p class="reviewer-text">
\t \t \t \t <img src="https://webster.cs.washington.edu/images/rotten.gif" alt="Rotten" />
\t \t \t \t <q>Impersonally animated and arbitrarily plotted, the story appears to have been made up as the filmmakers went along.</q>
\t \t \t </p>
\t \t \t <p class="reviewer-info">
\t \t \t \t <img src="https://webster.cs.washington.edu/images/critic.gif" alt="Critic" />
\t \t \t \t Ed Gonzalez <br />
\t \t \t \t <span class="publication">Slant Magazine</span>
\t \t \t </p>
\t \t \t <p class="reviewer-text">
\t \t \t \t <img src="https://webster.cs.washington.edu/images/fresh.gif" alt="Fresh" />
\t \t \t \t <q>The striking use of image and motion allows each sequence to leave an impression. It's an accomplished restart to this franchise.</q>
\t \t \t </p>
\t \t \t <p class="reviewer-info">
\t \t \t \t <img src="https://webster.cs.washington.edu/images/critic.gif" alt="Critic" />
\t \t \t \t Mark Palermo <br />
\t \t \t \t <span class="publication">Coast (Halifax, Nova Scotia)</span>
\t \t \t </p>
\t \t \t <p class="reviewer-text">
\t \t \t \t <img src="https://webster.cs.washington.edu/images/rotten.gif" alt="Rotten" />
\t \t \t \t <q>The script feels like it was computer generated. This mechanical presentation lacks the cheesy charm of the three live action films.</q>
\t \t \t </p>
\t \t \t <p class="reviewer-info">
\t \t \t \t <img src="https://webster.cs.washington.edu/images/critic.gif" alt="Critic" />
\t \t \t \t Steve Rhodes <br />
\t \t \t \t <span class="publication">Internet Reviews</span>
\t \t \t </p>
\t \t \t <p class="reviewer-text">
\t \t \t \t <img src="https://webster.cs.washington.edu/images/rotten.gif" alt="Rotten" />
\t \t \t \t <q>This movie is literally the worst movie ever. I'm not going to explain why. -10000000/10.</q>
\t \t \t </p>
\t \t \t <p class="reviewer-info">
\t \t \t \t <img src="https://webster.cs.washington.edu/images/critic.gif" alt="Critic" />
\t \t \t \t A. Rheal Kritik <br />
\t \t \t \t <span class="publication">Facade Inc.</span>
\t \t \t </p>
\t \t </div>
\t </div>
\t <p id="date">(1-10) of 88</p>
</div>
<div id="validators">
\t <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 />
\t <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>
哦，對不起。我一定忘了張貼圖像。一會兒。 – user3450277
對不起，請再檢查一次。它位於頁面頂部。這應該澄清我的意思。如果您需要更多信息，請告訴我。 – user3450277
你需要更多信息嗎？我很樂意進一步澄清，如果需要 – user3450277