围绕伪元素

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

这可以从您的float和h3元素中删除p。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;