1. 首页
  2. 问题列表
  3. 如果同级div元素仅有，HTML div元素不会分配新行
提问者：小点点

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

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


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

相关问题