Question

我的段落内容有两个div包围的问题：

http://jsfiddle.net/NinjaSk8ter/6sv5T/

我需要将内容显示在contentheader div下面并包装imagebox div而不是与imagebox div重叠。 p内容应该包含在内容标题和图像框中。

我试图为没有工作的contentheader和imagebox应用z-index。

但我设置了段落标记的margin-top，以便内容显示在contentheader div下面，但我不认为这是正确的方法。

我希望能够为内容应用“contentbox”类，但我不确定如何使这个div在其他contentheader和imagebox div之外。

如果有人能够告诉我如何做到这一点我会很感激。

Answer 1

我已经重新安排了您的HTML和CSS，如您所见： jsFiddle example 。

HTML

<div id="mid-featureleft">
   <div class="imagebox">
   </div>

   <div class="contentheader">
      <h1>Georgio Versari Painters  Artisans</h1>
   </div>
   <p>Content Content Content Content Content Content Content Content Content Content Content Content</p>
</div>

CSS

#mid-featureleft {
    height:250px;
    width:609px;
    margin: 12px 0 0 0;
    float:left;
    position:relative;
    background-color:#E7EFF7;
}
#mid-featureleft p {
    color: #0C2A55;
    margin:0;
    font-size:12px;
    line-height:14px; 
    padding: 5px 5px 5px 5px;
}
#mid-featureleft .contentheader {
    height:29px;
    width:286px;
    text-align:left;
    line-height:29px;
    margin:0 0 0 0;
    padding: 0 0 0 6px;
    float:left;
    background-color:red;
}

#mid-featureleft .imagebox {
    height:200px;
    width:272px;
    float: right;
    margin:0 0 0 20px;
    background-color:green;
}

问题元素和2个Div

1 个答案: