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

只需使用负数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/

Answer 2

对不起，不得不清理一下才能理解：

http://jsfiddle.net/ph2yq/7/

HTML：

<div class="article">
<div class="article-headline"><h1>Once upon a time</h1></div>
<div class="article-body">
<h2>Sub-title</h2>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 
</div>
</div>

CSS：

.article-body {
    padding: 20px 32px 25px 50px;
    margin-right: 50px;
}
.article {
    text-align:justify;
    color:#000;
    opacity:1;
    width: 590px;
    z-index: 15;
    box-shadow:-2px 0 5px 0 rgba(0, 0, 0, 0.5); 
    overflow: visible;
    background: #FFF;
}

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

Answer 3

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

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

Answer 4

您可能需要调整一些填充，但这应该可以帮助您入门。我给了标题aposition:absolute并调整了顶部，左侧和右侧以摆脱边框。

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

Answer 5

新的 CSS：

.article-headline {
    background:#03F;
    color: #fff;
    border-right:40px;
    border-right-color:#3F3;
    margin: -20px 0 0 -50px;
    width: 662px;
    padding: 10px 0  0 10px;
}

有演示：http: //jsfiddle.net/ph2yq/2/