html - DIV 内的 DIV 和填充问题

Question

我希望我的文章 DIV 的标题部分占据 DIV 的整个宽度并上升到顶部(如第二张图片)，但由于 DIV 的填充而无法实现(参见第二张图片) .有解决方法吗？谢谢

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

Answer 1

您的文章包含相对位置，因此绝对位置将起作用，因为它与容器相关。

.article-headline {
  position:absolute;
  top: 0px;
  left: 0px;
  width:100%
}

工作 jsFiddle: http://jsfiddle.net/ph2yq/11/

http://www.developerfusion.com/code/5405/css-positioning-within-a-container/