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>

Answer 2

.info位于#deals内。没有办法把它放在彼此之下

<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>

尝试正确缩进代码，您可以更轻松地查看这些内容。如果您有遗留代码，则可以使用http://www.freeformatter.com/html-formatter.html#ad-output等在线工具为您自动格式化html代码。

在另一个下面有一个div的问题

2 个答案: