Question

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

这是它应该是什么样子的小提琴： http://jsfiddle.net/NinjaSk8ter/nrJHP/

我的页面中有完全相同的代码，但p“内容”不包含内容标题和图像框“图像”：

http://www.northernvirginiapaintingcontractor.com/

这是标记：

    <div id="mid-feature">
    <div id="mid-featureleft" class="rounded">
        <div class="contentheader">
            <h1>Georgio Versari Painters & Artisans</h1>
        </div>
        <div class="imagebox">IMAGE
        </div>
        <p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content</p>
    </div>
    <div id="mid-featureright" class="rounded">

    </div>
    <div style="clear: both;">
    </div>
</div>

这是CSS：

#mid-feature {
width:925px;
margin:0 0 0 0;
position:relative;
/*overflow:hidden;*/  
/*background-color:Olive;*/
}
#mid-feature h1 {
color: #399DD6;
font-family: Arial;
font-size:17px;
}
/*#mid-feature p {
color: #0C2A55;
margin:29px 0 0 0;
position: absolute;
font-size:12px;
float: left;
z-index: 3;
line-height:14px; 
padding: 5px 5px 5px 5px;
}*/
#mid-featureleft {
height:250px;
width:609px;
margin: 12px 0 0 0;
float:left;
position:relative;
background-color:#E7EFF7;
}
#mid-featureleft p {
/*color: #0C2A55;*/
color:Red;
margin:0;
font-size:12px;
line-height:14px; 
margin-top: 27px;
padding: 5px 5px 5px 5px;
}
#mid-featureleft .contentheader {
height:29px;
width:286px;
text-align:left;
line-height:29px;
display: block;
float: left;
margin:0 0 0 0;
padding: 0 0 0 6px;
position:relative;
z-index: 1;
background-color:red;
}
#mid-featureleft .contentbox {
height:250px;
width:609px;
display: block;
float: left;
margin:0 0 0 0;
position:absolute;
background-color:blue;
}
#mid-featureleft .imagebox {
height:200px;
width:292px;
display: block;
float: right;
margin:0 0 0 317px;
position:absolute;
z-index: 2;
background-color:green;
}

如果有人可以告诉我为什么这在Fiddle有效，而不是我的页面，我会很感激。

Answer 1

您的小提琴与您的代码之间存在两个差异，这就是造成意外行为的原因。在#mid-featureleft .imagebox定义中，您要添加position:absolute属性，这会导致绿框覆盖文本。然后你有一个margin:0 0 0 327px属性，它正在推动图像下面的文字。

如果从CSS中删除这两个属性，则包装的行为与在小提琴中的行为相同。

Answer 2

您应该采用margin position样式中的#mid-featureleft和.imagebox属性。

CSS段落元素问题

2 个答案: