时间戳

首页 > 解决方案 > 铺设

在 CSS 中的一个盒子的顶部

html - 铺设
在 CSS 中的一个盒子的顶部

问题描述

我有一个特定的盒子样式，我正在尝试完成它，这让我很难过。这是一个参考图像：

带有边框和附加线条样式的框

一些项目，首先，我开始学习响应式设计，我已经能够做到这一点，但是一旦我开始调整它的大小，它就会中断。我希望它的盒子和小时都作为一个项目工作。

我试过的： - 带边框的盒子 - 在盒子 div 和外部设置 HR 样式 - 带 Z-Index 的 HR

这是代码：

#valuesContainer {
  border: 1px;
  border-style: solid;
  border-color: #ccc;
  font-family: sans-serif;
  font: Source;
  font-weight: normal;
  font-size: 20px;
  margin: 8%;
  padding: 5%;
  line-height: 1;
}

#valueTitle {
  font-family: sans-serif;
  font: Source;
  font-weight: 600;
  font-size: 22px;
}

#hrTop {
  width: 30vh;
  color: red;
  border-top: 5px solid #E7503D;
  position: relative;
  margin-right: -.2%;
  margin-top: -.75%;
  z-index: 999;
}

#hrTopRight {
  border: none;
  border-left:  5px solid #E7503D;
  height: 10vw;
  width:  1px;
  margin-top: -16%;
}
  <div class="row">
      <div class="col-6">
        <div id="valuesContainer" class="box">
          <hr id="hrTop"align="right">
          <h1 id="valueTitle">Title</h1>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod                 tempor incididunt ut labore et dolore magna aliqua. Feugiat scelerisque                 varius morbi enim nunc. 
          </p>
          <hr id="hrTopRight"align="right">
        </div>
      </div>

我不完全确定我是否以正确的方式进行此操作，但任何帮助将不胜感激。我试图四处搜索，这是我所能找到的信息。

更新：我看不到奖励这个答案的方法，因为它是评论。但我相信我可能已经找到了一种更好的方法来做到这一点，而无需使用 HR 标签。

t 看起来你正在使用

装饰盒子而不是在你的内容中表示分离（因为它们在开始和结束时）。您可以在 #valuesContainer 上使用伪元素，而不是在顶部放置一个具有绝对定位的框（确保 #valuesContainer 是相对定位的）。

标签： htmlcss

解决方案

尝试在父级上使用position: absoluteandrelativediv

#valuesContainer {
  border: 1px;
  border-style: solid;
  border-color: #ccc;
  font-family: sans-serif;
  font: Source;
  font-weight: normal;
  font-size: 20px;
  margin: 8%;
  padding: 5%;
  line-height: 1;
   position: relative;
}

#valueTitle {
  font-family: sans-serif;
  font: Source;
  font-weight: 600;
  font-size: 22px;
}

#hrTop {
  width: 30vh;
  color: red;
  border-top: 5px solid #E7503D;
 
    position: absolute;
top: -17px;
    right: -7px;
    z-index: -999999;
}

#hrTopRight {
  border: none;
  border-left:  5px solid #E7503D;
  height: 10vw;
  width:  1px;
  position: absolute;
    top: -14px;
    right: -8px;
}
<div class="row">
      <div class="col-6">
        <div id="valuesContainer" class="box">
          <hr id="hrTop"align="right">
          <h1 id="valueTitle">Title</h1>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod                 tempor incididunt ut labore et dolore magna aliqua. Feugiat scelerisque                 varius morbi enim nunc. 
          </p>
          <hr id="hrTopRight"align="right">
        </div>
      </div>

推荐阅读