填充没有应用于容器元素内的元素？
要求
我实际上是在尝试复制此assignment的网页输出。网页中使用的图片为here。这基本上是我所有这一切的最终目标，让这个网页尽可能接近所需的输出。
所有样式都必须在CSS中实现。我可以使用的唯一HTML标签是组织标签。
问题
我尝试创建和复制的网页的格式和间距出乎意料地错了。
每个文本气泡应该以20pts的垂直距离分开。这是我试图在CSS中实现的东西：
.reviewer-text {
padding-bottom: 20pt;
}
如果您看到由评论员Jay Sherman撰写的单行文字气泡，则垂直距离较小，文本气泡中的图标不会以其他徽标图像的方式居中。
在使用Firebug检查元素时，我注意到填充仅应用于文本。我不知道如何解决这个问题。我需要填充作为整体应用于元素。填充表面似乎适用于其余元素，因为有多行文本，但它确实没有。
需要解决的主要问题
- 我需要修复评论之间的填充。
- 我需要在评论中修复图片，以便他们正确定位。
- 我需要修正标题，使其与所需输出中的标题位于相同的位置。
所有这些都需要修复，而不会影响网页其余部分的格式。最终目标是使其尽可能接近所需的输出。
Current Output overlayed on Desired Output
^这应该使两者之间的差异更加明显。
代码
＆＃13;
＆＃13;
＆＃13;
＆＃13;
#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>
2 个答案:
答案 0 :(得分：0)
添加Margin-bottom
#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::after {
clear: both;
content: "";
display: block;
}
.reviewer-text {
background-color: #FFFFFF;
border: 2px solid #CCCCCC;
border-radius: 20px;
padding-top: 8px;
padding-bottom: 8pt;
padding-left: 8px;
padding-right: 8px;
margin-bottom:20pt;
}
#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>
答案 1 :(得分：0)
.reviewer-text {
padding-bottom: 20pt;
box-sizing:border-box;
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？