0

記事の DIV のヘッダー セクションが DIV の全幅を占めて一番上に来るようにしたいのですが (2 番目の画像のように)、DIV のパディングが原因でそれを実現できません (2 番目の画像を参照)。回避策はありますか? ありがとう

http://jsfiddle.net/ph2yq/2/

ここに画像の説明を入力

私が達成したいこと：

ここに画像の説明を入力

HTML:

<div class="article">
    <div class="article-headline"><h1>Once upon a time</h1></div>
    <h2>Sub-title</h2><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae </p>
      </div>

CSS:

.article {
    clear: right;
    float: right;
    text-align:justify;
    color:#000;
    opacity:1;
    width: 590px;
    padding: 20px 32px 25px 50px;
    position: relative;
    z-index: 15;
    margin-top: 136px;
    /* background: #3B5898; */

    box-shadow:-2px 0 5px 0 rgba(0, 0, 0, 0.5); 
    overflow: visible;
margin-right: 50px;
/* background-image: url("../images/pagetile.png"); */
    background: #FFF;
bottom:60px;
  /* box-shadow: 0 1px 5px rgba(0,0,0,0.25), 0 0 20px rgba(0,0,0,0.1) inset;
  border-radius: 1%     1%     1%     1% /     1%     1%     1%     1%; */

}


.article p {
    padding-right:20px;
    color: #333;
}
.article-headline {
    background:#03F;
    color: #fff;
    border-right:40px;
    border-right-color:#3F3;
}
.article h1, .article h2 {
    margin-top: -4px;
    padding-bottom: 2px;
}
4

5 に答える 5

1

パディングの一部を調整する必要があるかもしれませんが、これで作業を開始できます。見出しに a を付けposition:absolute、上下左右を調整して境界線をなくしました。

http://jsfiddle.net/ph2yq/5/

于 2013-06-03T20:41:20.033 に答える
1

負marginとpaddingin で遊んで.article-headlineください：

.article-headline {
    background:#03F;
    color: #fff;
    border-right:40px;
    border-right-color:#3F3;
    margin: -20px -32px 10px -50px; // this is relative to .article padding
    padding: 5px 40px 0; // this is relative to this margin
}

http://jsfiddle.net/ph2yq/10/

于 2013-06-03T20:43:54.270 に答える