html - H2 文本卡在后面且未清除 DIV 彩色框

Question

我在客户网站上工作，并试图让 H2 字体不在我用来创建的 div 和图像后面的橙色框后面。发生这种情况时我有相当不错的把握，但似乎无法找到解决方案。感谢所有帮助!

                <div id="srleft">
                <div class="orangebox"><img src="images/quality.png" alt="quality service in portland and vancouver" /></div>

                <h2>Quality</h2>
                <p>With Over ---- Years of combined experience we promise great quality on all window installations.</p>
            </div>

这是我的 CSS 代码:

#srleft {
position: relative;
float: left;
}  

.orangebox {
height: 88px;
width: 89px;
border: 1px solid rgb(74, 74, 74);
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background-color: rgb(240, 111, 38);
border-radius: 0px;
box-shadow: rgba(0, 0, 0, 0.6) 0px 1px 4px 0px;
display: block;
}

.orangebox img {
display: block;
position: absolute;
top: 0; bottom:0; left: 0; right:0;
margin: auto;

}

demo1 http://jonesbizzopp.com/hosted/Capture.PNG demo2 http://jonesbizzopp.com/hosted/Capture2.PNG

Answer 1

似乎没有必要使用 .orangebox {position: absolute;} ?