0

テキストの流れを妨げずに、div からオーバーフローする画像を取得したいと考えています。

ここに画像の説明を入力

http://songbundle.orgでライブで見ることができます*

上の画像の例。現在、テキストとフォームは右に移動し、画像が原因で中央揃えが失われます。

以下の私の現在のコード：

HTML:

<div class="box">
    <div id="boxarrow"></div>
    <p>text goes here</p>
</div>

CSS:

.box {
    margin:60px auto 0 auto; 
    width:240px; 
    border:solid 1px #7889BC; 
    background-color: #AEB8D7; 
    text-align:center;
}
#boxarrow {
    background:url(image/arrow.png); 
    width:77px; 
    height:81px; 
    display:block; 
    margin-left:-60px; 
    float:left;
}

あなたの助けに感謝します!

4

3 に答える 3

2

ちょっと、そこ、

試すことができる解決策の 1 つは、要素と要素に適用することposition: relative;です。これにより、要素がドキュメントの通常の流れから外れ、他の要素はその配置の影響を受けなくなります。.boxposition: absolute;#boxarrow#boxarrow

次に、 、、、およびを使用して、その位置を ( を指定したため、.box要素に対して相対的に) 調整できます。したがって、要素は次のようになります。position: relative;toprightleftbottom#boxarrow

#boxarrow {
  position: absolute;
  top: 30px;
  left: 20px;
}

繰り返しますが、これは考えられる解決策の 1 つにすぎませんが、状況を考えると最適な方法のようです。

お役に立てれば！

于 2012-10-22T16:54:16.113 に答える
2

削除する

margin-left:-60px; float:left;

あなたの #boxarrow から追加してください

left:-60px; position:absolute;

それから加えて

position:relative;

あなたの.boxに

最終結果：

.box {
  background-color: #AEB8D7;
  border: 1px solid #7889BC;
  margin: 60px auto 0 auto;
  position: relative;
  text-align: center;
  width: 240px;
}
#boxarrow {
  background: url("image/arrow.png");
  display: block;
  height: 81px;
  left: -60px;
  position: absolute;
  width: 77px;
}
于 2012-10-22T16:46:11.753 に答える
0

このように位置を絶対に変更するだけです...

#boxarrow {background:url(image/arrow.png); width:77px; height:81px; display:block; margin-left:-60px; float:left;position: absolute;}
于 2012-10-22T16:46:20.333 に答える