在一個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

新的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/

Answer 2

您的文章包含位置相對位置，因此位置絕對值將與容器相關。

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

您可能需要調整一些填充，但這應該讓您開始。我給了標題position:absolute，並調整了頂部，左側和右側擺脫邊界。

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

Answer 4

只是消極margin和padding在.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 5

對不起，只好把它清理乾淨有點明白了：

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