问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

求助大家，css中这种div应该怎么写？

头像
woaibaoba
    216487145


    如图所示，上面的线height为1px，width为662px；下面4条线height为1px，width为7px，颜色都为#A7A7A7

    前端javascriptcsscss3html
    阅读 1k
    avatarAI BotBETA

    在CSS中，你可以使用伪元素（:before 或 :after）或者多个 div 元素来创建这样的线。这里有一个简单的示例，使用单个 div 和伪元素来创建你描述的布局：

    .lines-container {
  position: relative;
  width: 662px;
  height: 10px; /* 或你想要的任何高度 */
}

.lines-container::before,
.lines-container::after {
  content: '';
  display: block;
  position: absolute;
  height: 1px;
  background-color: #A7A7A7;
}

.lines-container::before {
  width: 662px;
  top: 0;
  left: 0;
}

.lines-container::after {
  width: 7px;
  height: 4px; /* 因为有四条小线，每条高度为1px，所以总高度为4px */
  top: 5px; /* 将小线定位在大线下方 */
  left: 50%;
  margin-left: -4px; /* 居中小线，因为宽度为7px，所以左移宽度的一半 */
  repeat: repeat-x; /* 这行代码实际上不需要，因为背景色默认会填充整个元素 */
}

    然后，在HTML中，你只需要一个 div 来包含这些线：

    <div class="lines-container"></div>

    上面的CSS代码创建了一个包含伪元素的 div。:before 伪元素用于创建大线，而 :after 伪元素用于创建四条小线。通过调整 top 和 left 属性，以及使用 margin-left 来负值偏移，可以精确定位这些小线。

    请注意，这里的小线实际上是一个高度为4px的矩形，而不是四条分开的线。这是因为CSS中伪元素创建的是单个元素，而不是多个独立的线。如果你确实需要四个独立的线元素，那么你可能需要使用四个独立的 div 或其他元素，并使用CSS来分别样式化它们。

    如果你的设计确实需要四个分开的线，你可能需要这样的HTML结构：

    <div class="lines-container">
  <div class="top-line"></div>
  <div class="small-lines">
    <div class="small-line"></div>
    <div class="small-line"></div>
    <div class="small-line"></div>
    <div class="small-line"></div>
  </div>
</div>

    然后，使用如下CSS样式化：

    .lines-container {
  position: relative;
  width: 662px;
}

.top-line,
.small-line {
  height: 1px;
  background-color: #A7A7A7;
}

.top-line {
  width: 100%; /* 继承父元素的宽度，即662px */
}

.small-lines {
  position: absolute;
  top: 2px; /* 根据需要调整位置 */
  left: 50%;
  transform: translateX(-50%); /* 水平居中 */
}

.small-line {
  width: 7px;
  display: inline-block;
  margin: 0 2px; /* 如果有间隔需求的话 */
}

    在这个结构中，.top-line 是大线，而 .small-line 是四个小线。.small-lines 是一个容器，用于定位和居中这四个小线。通过 display: inline-block; 和 margin，可以管理小线之间的间隔（如果需要的话）。

    2 个回答
    得票最新
    头像
    前端搬运工
      7521519

      不知道你要的是不是这个效果
      1718077218994.png

      头像
      林小志
      4.4k2218

      这个问题不难，不过首先要清楚具体的使用场景，比如：

      • 下面 4 条线的是否允许文字或者内容是否可以覆盖在上面；

        如果不允许有其他内容覆盖上面的话，那是打算放数据表，还是纯内容

        • 数据表的话，可以考虑用 table 来实现，当然也可以不用；
        • 如果是纯内容的话，那可以多用几个 div 来实现；

        如果允许内容覆盖上面的话，那就用背景来实现，比如渐变的方式

      • 这个 div 容器的高度是否固定，还是自适应；

        一般来说应该是自适应的，如果不是自适应的话，那就需要设定一个高度，设定了这个高度之后，理论上来说，应该每条线是等高的吧

      • 这个 div 容器的背景是否会有其他东西，或者仅仅只是一个背景色

        前面考虑到用渐变的方式来实现，如果有其他背景色的话，那么就需要多一点考虑

      具体的场景不清楚，按照问题，并且线条的高度是限定在 1px，那就这样吧。不过 height: 1px 好像很奇怪，不知道是不是描述错误，应该是 height 为 7px，width 为 1px 呢？

      https://jsfiddle.net/c4b6pk07/

      CleanShot 2024-06-12 at 11.32.31@2x.png
      CleanShot 2024-06-12 at 11.32.50@2x.png

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题