在伪元素周围包装 header 和 p

Question

我有一个 div，它有一个伪元素，在它之前出现在 div 的左上角，然后是我想环绕它的 h2 和 p 元素，我找到了这篇文章 Faking ‘float: center’ with Pseudo Elements 对此做了一些解释。基本上，如果我不使用 h2 或 p 它会起作用，但一旦我使用它就会停止换行。

.hh-info-content:before {
  content: "";
  float: left;
  height: 100px;
  width: 35%;
  background-color: #006;
}

.hh-info-content {
  position: relative;
  float: left;
  min-height: 120px;
  width: 300px;
  background-color: red;
  padding-top: 0!important;
  padding: 0.8em;
}

.hh-info-content h3 {
  font-family: 'Baloo', cursive !important;
  font-size: 1.75em !important;
  line-height: 1em;
  color: #414141;
  text-align: right;
  margin: 0px !important;
  padding: 0px !important;
  padding-top: 4%!important;
}

.hh-info-content p {
  float: left;
  font-family: 'Didact Gothic', sans-serif !important;
  color: #414141;
  line-height: 1.4em;
  text-align: right;
  margin: 0 !important;
  padding: 0 !important;
}

<div class="hh-info-content">
  <h3>Title</h3>
  <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
</div>
<br />
<div class="hh-info-content">
  Title Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text TextText Text Text Text Text Text Text Text Text Text Text Text Text Text
  Text Text Text TextText Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text TextText Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text TextText Text Text Text Text Text Text Text Text Text Text
  Text Text Text Text Text Text TextText Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text TextText Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text TextText Text Text Text Text Text Text Text
  Text Text Text Text Text Text Text Text Text TextText Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
</div>

Answer 1

这通过从 h3 和 p 元素中删除 float 来实现。

.hh-info-content:before{
    content: "";
    float: left;
    height: 100px;
    width: 35%;
    background-color:#006;
}
.hh-info-content{
    position:relative;
    float:left;
    min-height:120px;
    width:300px;
    background-color:red;
    padding-top:0!important;
    padding:0.8em;
}
.hh-info-content h3{
    font-family: 'Baloo', cursive !important;
    font-size:1.75em !important;
    line-height:1em;
    color:#414141;
    text-align:right;
    margin:0px !important;
    padding:0px !important;
    padding-top:4%!important;
}
.hh-info-content p{
text-align: left;
    font-family: 'Didact Gothic', sans-serif !important;
    color:#414141;
    line-height:1.4em;
    text-align:right;
    margin:0 !important;
    padding:0 !important;
}

<div class="hh-info-content">
      <h3>Title</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <br />
    <div class="hh-info-content">
      Title
      Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text TextText Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text TextText Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text TextText Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text TextText Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text TextText Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text TextText Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text TextText Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text TextText Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
    </div>

在伪元素周围包装 header 和 p

Wrapping header and p around pseudo elements

html

css

word-wrap

css-float

pseudo-element