web-dev-qa-db-ja.com

幅100％で右端が壊れています

画像と2番目のDIVを含むDIVがあります。親DIVはposition: absolute;に設定され、子DIVはposition: relativeに設定されます。アイデアは、画像の上に写真のキャプションを表示することです。

子DIVには、親の100%幅、左、右、および下の10pxに加えて、黒の背景が必要です。

.article-container {
  position: relative;
}

.photo-caption {
  width: 100%;
  background-color: black;
  position: absolute;
  bottom: 0px;
  margin-right: 10px;
  margin-left: 10px;
  margin-bottom: 10px;
}
<div class="span15 article-container">
  <img src="images/example-image-1.png" />
  <div class="photo-caption">This is the subtitle text on top.</div>
</div>

左マージンは、.photo-captionの境界の外側で.article-containerバンプします。右マージンは効果がないようです。

また、box-sizingでこれを修正しようとしました。 .photo-captionの幅を親の幅まで下げているようですが、まだオーバーハングがあります。

htmlcsspositionmargin
25
Olly F

絶対配置要素は、topではなく、left、right、bottom、およびmarginで配置されます。

17
Sven Bieder

width:100%を削除する方が良いでしょう。このように書く：

.photo-caption  {
            left:0;
            right:0;
            background-color: black;
            position: absolute;
            bottom: 0px;
            margin-right: 10px;
            margin-left: 10px;
            margin-bottom: 10px;
            }
23
sandeep

問題は、_width=100%_が_photo-caption_の正確な幅_article-container_を与えることです。マージン（またはパディング）を追加しても、幅の計算には影響しません。 css calc()を使用して自分でこれを行うことができるので、スタイルは次のようになります。

_.photo-caption  {
    width: calc(100% - 20px); // 20 = right margin + left margin
    background-color: black;
    position: absolute;
    bottom: 0px;
    margin-right: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
}
_

Calc（）ブラウザのサポートを確認したい場合があることに注意してください here

7
Ali

問題は、幅を100％に設定しているため、余白の余地がないことです。代わりに、幅を100％未満のパーセンテージに調整してから、余白の半分のパーセンテージとしてマージンを指定します。

例えば：

style="width:98%; margin-left: 1%;"
5
Versatile

paddingをbox-sizingと組み合わせて使用​​するか、または絶対に配置されたマージンのないマージンのあるネストされたブロックを使用します。

2
Marat Tanalin

ブロックを表示する場合、幅：100％は必要ありません。それはこれらの小さな問題をすべて解決するかもしれません。

.photo-caption  {
        display:block;
        background-color: black;
        position: absolute;
        bottom: 0px;
        margin-right: 10px;
        margin-left: 10px;
        margin-bottom: 10px;
        padding:10px
        }
1
Wesley Terry

にとって：

簡単な答え：margin-rightを使用しようとしないでください。 'margin-left：xxxpx;を使用します。 '-xxxを、divボックス（Div Style =ボックス）を必要なだけプッシュするのに十分な大きさにします。フィドルは不要で、必要な場所に正確に配置できます。

1
Will Morledge

マージンは、各辺から隣接する要素までの距離ですORドキュメントの境界。

右マージンとは、エレメントを左に押すことではなく、右側にスペースを生成することを意味します。次のエレメントが来ると、前述のmargin-rightの後に来ます。あなたの場合、幅は100％です。マージン右に使用できます。

混乱点：1）幅がautoの場合、視覚効果は異なります。同じマージンが右に生成されます。しかし、widthプロパティがないため、幅は自由に変更できます。

2）要素が右にフロートされたときと同じ効果。

上記の2つのポイントは、マージンの異なるイメージを念頭に置いています。

0
Parshant