在我的Freecodecamp Tribute Page项目中,我通过关闭h1
和p
标签之间的所有div来创建两个堆叠列之间的空格。但是,我宁愿在我的所有专栏中保留一些div。还有另一种方法可以添加这个空间吗?
body {
background-image: url("http://www.gigicomputerdesigns.com/images/victorian-wallpaper.jpg");
margin: 10px 10px;
}
h1 {
font-family: Great Vibes;
padding: 10px;
text-align: center;
}
h4 {
font-family: Georgia;
padding: 10px;
text-align: center;
color: #940E29
}
.opacity {
background: rgba(170, 166, 166, 0.5)
}
p {
text-align: center;
font-family: georgia;
padding: 5px;
}
li {
text-align: left;
font-family: georgia;
padding: 5px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css"
href="https://fonts.googleapis.com/css?family=Great Vibes">
<div class="container">
<div class="opacity">
<div class="col">
<h1>A Tribute to Edgar Allan Poe</h1>
</div>
</div>
</div>
<div class="container">
<div class="opacity">
<div class="row">
<div class="col">
<p>Edgar Allan Poe is known for his dark, romantic style of writing and poetry. His life tragedies are reflected in his work, or is it the other way around?
<h4>Timeline:</h4>
<ul>
<li><b>Jan 19, 1809: </b> Edgar Allan Poe Is Born</li>
<li><b>1811:</b> Edgar Poe's mother dies and he is adopted by John Allan</li>
<li><b>1826:</b> Edgar Allan Poe attends the University of Virginia</li>
<li><b>May 27, 1827:</b> Edgar Allan Poe joins US Army</li>
<li><b>February 28, 1829:</b> Poe’s foster mother dies</li>
<li><b>July 1, 1830: </b> Edgar Allan Poe enrolls at West Point</li>
<li><b>February 8, 1831: </b> Edgar Allan Poe dismissed from West Point</li>
<li><b>October 19, 1833: </b> After winning a contest Edgar Allan Poe's "MS. Found in a Bottle" is published</li>
<li><b>September 22, 1835: </b> Edgar Allan Poe marries his cousin, Virginia Clemm</li>
<li><b>December 1835: </b> Edgar Allan Poe Takes a Job as Editor of the Southern Literary Messenger</li>
<li><b>July 1838: </b> Edgar Allan Poe Publishes First Novel "The Narrative of Arthur Gordon Pym"</li>
<li><b>1839: </b> "Tales of the Grotesque and Arabesque" Edgar Allan Poe's first volume of short stories is published</li>
<li><b>July 1839: </b>Edgar Allan Poe Becomes Assistant Editor of Burton's Gentleman's Magazine</li>
<li><b>April 1841: </b>Edgar Allan Poe Becomes the Editor at Graham's Magazine</li>
<li><b>April 1844: </b>Edgar Allan Poe Moves to New York and Works for the New York Evening Mirror</li>
<li><b>November 1844: </b>"Thou Art The Man" Is Published</li>
<li><b>January 29, 1845: </b>Edgar Allan Poe's "The Raven" is published</li>
<li><b>January 30, 1847: </b>Virginia Clemm Poe Dies of Tuberculosis</li>
<li><b>November 1848: </b>Edgar Allan Poe Proposes to Poet Sarah Whitman but engagement is called off because he cannot quit drinking</li>
<li><b>August 1849: </b> Edgar Allan Poe Becomes Engaged to Sarah Elmira Royster</li>
<li><b>October 7, 1849: </b>Edgar Allan Poe dies a mysterious death on the streets of Baltimore</li>
</ul>
</div>
<div class="col">
<p>
<img src="http://www.gigicomputerdesigns.com/images/Edgar_Allan_Poe.png" style="height:500px">
</p>
<p>
<img src="http://www.gigicomputerdesigns.com/images/original-grave.jpg" style="height:500px">
</p>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="opacity">
<div class="col">
<h4>
Ghastly grim and ancient raven wandering from the Nightly shore —
Tell me what thy lordly name is on the Night's Plutonian shore!"
Quoth the Raven, "Nevermore."</h4>
</div>
<p>
<img src="http://www.gigicomputerdesigns.com/images/raven.PNG" style="height:100px">
</p>
<p>Get to know more about Poe at <a href="https://worldhistoryproject.org/topics/edgar-allan-poe" style="color:#940E29">World History Project</a>
</p>
<br>
</div>
</div>
</div>
<footer class="text-center">
<hr>
<p>Created by<a href="https://www.gigicomputerdesigns.com" target="_blank" style="color:#940E29"> GiGi</a>
</p>
</footer>
&#13;