html - 一个 div 在另一个之下的问题

Question

好的，我知道之前有人问过这个问题，但我需要一些具体的建议吗？

我不确定我是否完全失去了理智，但我终生无法将我的 .info div 置于#deals div 之下。我正在使用背景图像，因此第一个 div 的高度是固定的(出于隐私原因未提供图像)我显然可以通过添加填充来移动它，但这并不理想。任何人都可以帮助指出我在这里做错了什么吗？

    <div class="row" id="deals">
<div class="col-md-12">
<div><p class="lead" id="trans"><strong>Blah blah blah blah bla blah blah<br>blah blah bla blah blah</strong></p></div>
<div class="info"><p>blah blah bla blah blahblah blah bla blah blahblah blah bla blah blah</p>
<p><strong>blah blah bla blah blahblah blah bla blah blahblah blah bla blah blahblah blah bla blah blah</strong></p>
<p><strong>blah blah bla blah blahblah </strong>blah blah bla blah blahblah blah bla blah blahblah blah bla blah blahblah blah bla blah blah</p></div>
  </div></div>

CSS:

#deals {  
  height:600px;
  text-align:center;
  color:#fff;
  width:100%;
  margin:auto;
  }
#trans{
  font-size:25px;position:relative;
  background: rgb(0,0,0); /* Fallback for older browsers without RGBA-support */
  background: rgba(0,0,0, 0.5);
  width:43%;
  margin:auto;
  top:300px;
}
.info {
  color:#000;
}

这一定很愚蠢，但是什么？

Answer 1

您的 info div 嵌套在您的 deals div 中。如果可以的话，你应该像这样把它移到下面；

<div class="row" id="deals">
    <div class="col-md-12">
        <div>
            <p class="lead" id="trans"><strong>Blah blah blah blah bla blah blah<br>blah blah bla blah blah</strong></p>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
         <div class="info">
            <p>blah blah bla blah blahblah blah bla blah blahblah blah bla blah blah</p>
            <p><strong>blah blah bla blah blahblah blah bla blah blahblah blah bla blah blahblah blah bla blah blah</strong></p>
            <p><strong>blah blah bla blah blahblah </strong>blah blah bla blah blahblah blah bla blah blahblah blah bla blah blahblah blah bla blah blah</p>
         </div>
    </div>
</div>