2013-08-20 15 views
5

I親(コンテナ)と子(H1ヘッダ/ブロック)を有します。子供が親の幅を正しく超えさせる方法は?

.container { 
    width: 1024px; 
} 
#h1 { 
    width: 1024px; 
    padding: 0 30px 0 30px; 
    background-color: something; 
} 

問題ではなく、右に親のうち、左に30個のピクセル、30個のピクセルを伸ばすのではなく、右に60個のピクセルを伸ばす、何らかの理由です。 は、今私は戻って、それを引いても、それを作るために-30pxの負の左マージンを設定し、それを行うには良い/適切な方法がある場合、私は不思議でしたか?

これは何が起こるかの写真です:

http://i.imgur.com/0Y03Z9M.jpg

これは私がそれのように見える(と、それは負のマージンを持つように見えるようになった)したいものの絵です:

http://imgur.com/0Y03Z9M,kx4pfMo#1

+7

でそれを試してみては結構です、唯一の他の方法は、 '位置を使用することです負の「左」の値 –

+0

うん、負のマージンがここに行く方法です。 – andi

答えて

0

負のマージンは完全に罰金です。または、絶対位置と相対位置を使用してプログラム的に配置することもできます。

CSS

.container { 
    background: crimson; 
    height: 600px; 
    margin: 0 auto; 
    width: 300px; 
} 

.header { 
    background: purple; 
    height: 100px; 
    left: 0; 
    margin: 60px auto; 
    padding: 0 30px; 
    position: absolute; 
    right: 0; 
    width: 360px; 
} 

HTML

<div class='container'> 
    <div class='header'></div> 
</div> 

Codepen example.

1

負のマージンは本当にこの場合に行くための唯一の方法である(といくつかのケースの一つであります私はそれが許容される使用と考えています)。

あなたが探検ことができ、他のソリューション(例えば、中央に整列BG画像として設定赤いBGを持って、その後h1外のコンテンツのためのパディングとdiv年代を持っている)がありますが、何のボーナスは負を使用しての上にこれを行うには本当にありません実際に長期的にはそれは維持しにくい。すでに示唆されているとおり

、あなたもこれを解決するためにポジショニングを使用することができます(以下の例を参照)。

HTML:

<div class="container"> 
    <p>Lorem ipsum dolor sit amet</p> 
    <p>Lorem ipsum dolor sit amet</p> 
    <h1>testing, testing, 1 2 3</h1> 
</div> 

はCSS:残念ながら

.container { 
    background: #f00; 
    margin: 0 0 0 20px; 
    padding: 100px 0; 
    position: relative; 
    width: 400px; 
} 

h1 { 
    background: #00f; 
    color: #fff; 
    left: -20px; 
    padding: 0 20px; 
    position: absolute; 
    width: 100%; 
} 

http://jsfiddle.net/d7KJ9/4/

h1後にコンテンツを追加すると、この方法を破るように見えるけれども:

http://jsfiddle.net/d7KJ9/2/

上記の方法は、作業をした場合はさらに、それは必ずしもネガティブマージンを(それが実際にはより多くのCSSを必要とする)を使用したよりも良くなることはないでしょう。適切に使用する場合

結論として、単に負のマージンのソリューションを行く、負のマージンは(あなたが欲しいものを達成するためのより良い方法があり、それらを使用する前に、自分にだけの理由は、必ずしも悪いことではありませんか?)

+1

私はちょうど良い、 "適切な"方法がないことを確認したいと思っていました。あなたの有益な答えをありがとう:) – user2123244

+0

それは大丈夫です:)それが助けて欲しい! – Sean

0

あなたは#h1position:relativeし、その後leftを使用することができますとabsolute`:

.container { 
    width: 400px; 
    height: 500px; 
    background: red; 
    margin: 0 auto; 
} 

#h1 { 
    width: 400px; 
    height: 40px; 
    left: -30px; 
    background: blue; 
    padding: 0 30px; 
    position: relative; 
    top: 40px; 
} 

は、負のマージンを使用してJSBin

関連する問題