如果同级div元素仅有，HTML div元素不会分配新行

Question

我是HTML和CSS的新手。

在第一个div中，我想显示元素，在第二个div中，我想在背景图像上显示文本。但在结果元素上显示的是背景图像。我想显示元素，在下面一行我想显示背景图像。如何实现这一点？

下面是我的代码。我正在使用HTML和CSS。

null

.navbar {
  width: 100%;
}

.nav-left {
  float: right;
  width: 25%;
  position: absolute;
  padding-top: 14px;
}

.feature {
  border: 2px solid black;
  padding: 25px;
  background: url(https://static3.depositphotos.com/1005590/206/i/950/depositphotos_2068887-stock-photo-lightbulb.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.navbar-Logo {
  float: right;
  color: #dd845a;
  text-decoration: none;
}

<div class="navbar">
  <div class="nav-left">
    <a class="navbar-Logo" href="#">LOGO</a>
  </div>
</div>
<div class="feature">
  <h1> Sample Text</h1>
  <p>Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text.</p>
  <p><a href="#">Engage Now</a></p>
</div>

null

Answer 1

看来您不理解您正在使用的CSS：

• 删除floats，将float:right替换为.nav-left
中的 text-align:right
• 从.nav-left
中删除 位置：绝对

结果如下：

null

.navbar {
  width: 100%;
}

.nav-left {
  text-align: right;
  width: 25%;
  padding-top: 14px;
}

.feature {
  border: 2px solid black;
  padding: 25px;
  background: url(https://static3.depositphotos.com/1005590/206/i/950/depositphotos_2068887-stock-photo-lightbulb.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.navbar-Logo {
  color: #dd845a;
  text-decoration: none;
}

<div class="navbar">
  <div class="nav-left">
    <a class="navbar-Logo" href="#">LOGO</a>
  </div>
</div>
<div class="feature">
  <h1> Sample Text</h1>
  <p>Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text.</p>
  <p><a href="#">Engage Now</a></p>
</div>