0

コンテンツを contentheader div の下に表示し、imagebox div をラップし、imagebox div と重ならないようにする必要があります。p Content は contentheader と imagebox を囲む必要があります。

これがどのように見えるかのフィドルです： 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では機能するのに私のページでは機能しないのか、誰かが私に手がかりを与えることができれば、私はそれを感謝します.

4

2 に答える 2

1

フィドルとコードには 2 つの違いがあり、それが予期しない動作の原因となっています。#mid-featureleft .imagebox定義では、属性を追加しているためposition:absolute、緑色のボックスがテキストに重なっています。次にmargin:0 0 0 327px、画像の下にテキストをプッシュする属性があります。

これら 2 つの属性を CSS から削除すると、ラッピングはフィドルと同じように動作します。

于 2012-07-25T20:56:45.013 に答える
0

スタイルからmarginおよびposition属性を取得する必要があります。#mid-featureleft .imagebox

于 2012-07-25T20:57:40.737 に答える