html - 将 header 和p包裹在伪元素周围

我有一个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>

最佳答案

这通过从float和h3元素中删除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{
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>

关于html - 将 header 和p包裹在伪元素周围，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42437916/