0

ここでイライラして、div を適切に並べようとしています! アート フレームの画像内にテキストを配置しようとしています。htmlは次のとおりです。

<div id="frame">
<div id="songtext">
<p>lorem ipsum dolor...</p>
</div>
</div>

CSS は次のとおりです。

#frame {
background:url(images/gold-frame-trans-bg.png) no-repeat; 
margin-left:auto;
margin-right:auto;
margin-top:0px;
width:650px;
height:750px;
}

#songtext {
width:336px;
height:410px;
margin-left:auto;
margin-right:auto;
margin-top:140px; 
overflow:auto;
}

このようにすると、画像の上部がテキストの上部と揃えられ、画面の上部から 140 ピクセル下になります。しかし、 #songtext {margin-top:140px;} を #songtext {padding-top:140px;) に変更すると、テキストは正しい場所に表示されますが、スクロールバーはページの上部から始まり、画像が中断されます。上にスクロールすると、テキストが画像の下に隠れているように見えるのではなく、画像の上をスクロールします。(これは意味がありますか?) 視覚的に見たい場合は、次のページをご覧ください: http://studentaccess.emporia.edu/~asmith40/AVAwebsite/seemsimpossible.html

4

1 に答える 1

0

あなたはこのようにそれを行うことができます：

#songtext {
 height: 410px;
 margin-left: 160px(or similar);
 margin-right: auto;
 margin-top: 140px;
 overflow: auto;
 position: absolute;
 width: 336px;

}

于 2012-12-20T00:26:42.963 に答える