CSS 단락 요소 관련 문제

Question

콘텐츠를 contentheader div 아래에 표시하고 imagebox div를 감싸고 imagebox div와 겹치지 않게해야합니다. p 내용은 contentheader와 imagebox를 둘러싸 야합니다. 나는 그러나 P "콘텐츠"가 contentheader 및 imagebox "이미지"를 둘러싸고하지 않고, 내 페이지 내에서 동일한 코드를 http://jsfiddle.net/NinjaSk8ter/nrJHP/

: 여기

는 어떠해야하는지의 바이올린입니다

여기

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

가 있습니다 : 여기

http://www.northernvirginiapaintingcontractor.com/

는 마크 업입니다 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; 
} 

누군가가 나를 왜곡하지만 내 페이지가 아닌지에 대한 단서가 있다면, 고맙겠습니다.

Answer 1

피들과 코드 간에는 두 가지 차이점이 있으며 예기치 않은 동작의 원인이됩니다. #mid-featureleft .imagebox 정의에서 position:absolute 속성을 추가하면 녹색 상자가 텍스트 위에 겹쳐집니다. 그런 다음 이미지 아래의 텍스트를 푸시하는 margin:0 0 0 327px 속성이 있습니다.

CSS에서 두 속성을 제거하면 줄 바꿈이 바이올린에서와 같이 작동합니다.

Answer 2

#mid-featureleft.imagebox 스타일의 margin 및 position 속성을 사용해야합니다.