当前位置: 首页 > 知识库问答 >
问题:

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

齐奕
2023-03-14

我是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个答案

盖昀
2023-03-14

看来您不理解您正在使用的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>
 类似资料:
  • 使用selenium web驱动程序来自动化测试,在我们的应用程序元素(3个输入字段)中xpath是相同的,所以我不能传递这三个字段中的值,请查找html

  • 本文向大家介绍行内元素、块级元素、空(void)元素分别有哪些?相关面试题,主要包含被问及行内元素、块级元素、空(void)元素分别有哪些?时的应答技巧和注意事项,需要的朋友参考一下 行内元素 a, b, input, span, label, button, textarea... 块级元素 div, form, table, h1...h6, p 空元素 img, input, hr, br,

  • 您好帮助请把xml文件放在里面一些相同的元素,这些元素的内容不同,“name”属性。这些元素有不同的项目集,如何进行解咒?断续器: 我需要在Cdb和FmssSc中执行对象2的解组。我的尝试:通用元素-ServiceBroker.class 适配器.class Cdb.class FmssSc.class 演示: 错误:

  • div元素可以把文档分割为独立的、不同的区域,每个区域就相当于一个块级容器,其中可以放置段落、标题、表格、图片、乃至任何HTML元素。 事实上,div元素本身并没有任何特定的语义,它的真正目的是把页面进行分块,然后通过CSS对它们进行格式化,来实现页面布局,也就是传说中的 DIV + CSS 布局。因此,可以说 div元素是一个通用容器,一个没有任何语义的容器。 如,使用 div元素把页面划分为

  • 本文向大家介绍行内元素有那些。块级元素有那些。空元素有哪些相关面试题,主要包含被问及行内元素有那些。块级元素有那些。空元素有哪些时的应答技巧和注意事项,需要的朋友参考一下 首先:CSS规范规定,每个元素都有display属性,确定该元素的类型,每个元素都有默认的display值,如div的display默认值为“block”,则为“块级”元素; span默认display属性值为“inline”,

  • 本文向大家介绍如果列表元素li的兄弟元素为div,会产生什么情况?相关面试题,主要包含被问及如果列表元素li的兄弟元素为div,会产生什么情况?时的应答技巧和注意事项,需要的朋友参考一下 单纯的对html来说主要是破坏了语义结构吧, css方面来说不好统一控制样式,div默认也没有list-style