CSS中文字后面的矩形

debugcn 发表于 Dev

雷米

我正在尝试在CSS中进行非常简单的设计。我有一个标题和一个段落。我需要在其后面添加一个矩形，以使文本溢出该矩形。

像这样的东西：https : //i.imgur.com/gDXw2fT.png

我尝试了许多不同的方法，我提出的解决方案是：

<div class="container">
  <div class="rectangle">

  </div>
  <div class="main">
    <h1>
      This is the title
    </h1>
    <p>This is a paragraph paragraphparagraphpararrrrrgrapaaaaaaaaaah.</p>
  </div>

</div>

.container {
  text-align: center;
  left: 0;
  right: 0;
 }

.rectangle {
  position: relative;
  width: 180px;
  height: 140px;
  margin: auto;
  z-index: -1;
  border: 5px solid lightgray;
}

.main {
  width: 300px;
  min-height: 60px;
  margin: auto;
  margin-top: -150px;
}

https://jsfiddle.net/bcsg6q03/3/

但是我需要一个更好的解决方案。这依赖于margin-top：-150px；因此，如果我更改文本或矩形大小，一切都会移动。

有没有更好的方法呢？谢谢

Hiren vaghasiya

使用:before和left

.container {
  text-align: center;
  left: 0;
  right: 0;
 }

.main {
  position:relative;
  width: 300px;
  min-height: 60px;
  margin: auto;
  padding-top:15px;
}

.main:before {
  content:'';
  position: absolute;
  width: 220px;
  height: 140px;
  margin: auto;
  z-index: -1;
  border: 5px solid lightgray;
  left:40px;
}

<div class="container">
  <div class="main">
    <h1>
      This is the title
    </h1>
    <p>This is a paragraph paragraphparagraphpararrrrrgrapaaaaaaaaaah.</p>
  </div>

</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。