我需要將內容顯示在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;
}
如果有人可以給我爲什麼這部作品在小提琴,但不是我的網頁,我將不勝感激。
你在HTML標記中有DOCTYPE嗎? – Jawad 2012-07-25 20:56:23
是的:<!DOCTYPE html PUBLIC – Paul 2012-07-25 21:03:01
也許我錯了,但如果我可以正確地重定位,那麼position:absolute和float不能一起工作。 – Jawad 2012-07-25 21:04:56