在没有一堆div的堆叠列之间创建一个空格?

时间:2017-02-09 18:12:15

标签: html multiple-columns space

在我的Freecodecamp Tribute Page项目中,我通过关闭h1p标签之间的所有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;
&#13;
&#13;

0 个答案:

没有答案