0

2つのdivで囲まれた段落の内容にわずかな問題があります。

http://jsfiddle.net/NinjaSk8ter/6sv5T/

コンテンツをcontentheaderdivの下に表示し、imagebox divをラップして、imageboxdivと重ならないようにする必要があります。pコンテンツは、コンテンツヘッダーとイメージボックスを囲む必要があります。

動作しなかったコンテンツヘッダーとイメージボックスにz-indexを適用しようとしました。

ただし、コンテンツがcontentheader divの下に表示されるように、paragraphタグのmargin-topを設定しましたが、それが正しいアプローチではないと思います。

コンテンツに「contentbox」クラスを適用できることを望んでいましたが、このdivを他のcontentheaderおよびimageboxdivの外部に配置する方法がわかりません。

誰かがこれがどのように行われるかについて私に手がかりを与えることができれば、私はそれをいただければ幸いです。

4

1 に答える 1

0

ここに表示されているように、HTMLとCSSを再配置しました：jsFiddleの例。

HTML

<div id="mid-featureleft">
   <div class="imagebox">
   </div>

   <div class="contentheader">
      <h1>Georgio Versari Painters  Artisans</h1>
   </div>
   <p>Content Content Content Content Content Content Content Content Content Content Content Content</p>
</div>​

CSS

#mid-featureleft {
    height:250px;
    width:609px;
    margin: 12px 0 0 0;
    float:left;
    position:relative;
    background-color:#E7EFF7;
}
#mid-featureleft p {
    color: #0C2A55;
    margin:0;
    font-size:12px;
    line-height:14px; 
    padding: 5px 5px 5px 5px;
}
#mid-featureleft .contentheader {
    height:29px;
    width:286px;
    text-align:left;
    line-height:29px;
    margin:0 0 0 0;
    padding: 0 0 0 6px;
    float:left;
    background-color:red;
}

#mid-featureleft .imagebox {
    height:200px;
    width:272px;
    float: right;
    margin:0 0 0 20px;
    background-color:green;
}​
于 2012-04-27T02:58:57.990 に答える