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/seemssimpossible.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 回答