環繞僞元素的標題和p

Question

我有一個div，它有一個僞元素，然後出現在div的左上角，然後是我想環繞它的h2和p元素，我發現這篇文章Faking ‘float: center’ with Pseudo Elements這解釋了一點。基本上，它可以工作，如果我不使用h2或p，但一旦我停止包裝。

Fiddle

CSS

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

HTML

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