2012-07-25 177 views
0

我需要將內容顯示在contentheader div下方,並將imagebox div包裹並且不與圖像箱div重疊。 p內容應該圍繞contentheader和imagebox。CSS段落元素問題

這裏是它應該是什麼樣子的小提琴: http://jsfiddle.net/NinjaSk8ter/nrJHP/

我有我的頁面內完全相同的代碼,但是P「內容」不圍繞contentheader和imagebox「形象」:

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

如果有人可以給我爲什麼這部作品在小提琴,但不是我的網頁,我將不勝感激。

+1

你在HTML標記中有DOCTYPE嗎? – Jawad 2012-07-25 20:56:23

+0

是的:<!DOCTYPE html PUBLIC – Paul 2012-07-25 21:03:01

+0

也許我錯了,但如果我可以正確地重定位,那麼position:absolute和float不能一起工作。 – Jawad 2012-07-25 21:04:56

回答

1

你的小提琴和你的代碼有兩點不同,這就是導致意外行爲的原因。在您的#mid-featureleft .imagebox定義中,您將添加一個position:absolute屬性,該屬性導致綠框覆蓋文本。然後你有一個margin:0 0 0 327px屬性,它推動圖像下面的文本。

如果您從CSS中刪除這兩個屬性,您的包裝就像它在小提琴中的行爲一樣。

0

您應該從#mid-featureleft.imagebox風格中獲取marginposition屬性。