带文本的浮动图像-CSS文本对齐

我经营一个买卖网站。在下一页中，当您单击卖方项目时，它会打开一个浮动放大图（Nyromodal），并在其上显示项目描述。谁能告诉我如何更改下面的代码，使项目描述整齐地位于浮动放大窗口的底部，而不会像某些项目那样重叠窗口。它的网页是：www.onlinecarbooty.com/go-booting.aspx

以下是CSS。。控制文本显示的是.nyromodataltle

.nyroModalBg {
position: fixed;
overflow: hidden;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #000;
opacity: 0.7;
}

.nmReposition {
position: absolute;
}

.nyroModalCloseButton {
top: -30px;
right: -30px;
width: 32px;
height: 32px;
text-indent: -9999em;
background: url(img/close.gif);
}

.nyroModalTitle {
right: 10%; margin: 0;
margin-bottom:-10%;
word-wrap:break-word; font-size: 2.3em;
background-color: #000000; color: #ffffff; 
}

.nyroModalCont {
overflow: hidden;   position: absolute;
border: 4px solid #777;
margin: 25px;
background: #fff;
}

.nyroModalCont iframe {
width: 480px;
height: 400px; overflow: hidden;
}

.nyroModalError {
border: 4px solid red;
color: red;
width: 250px;
height: 250px;
}

.nyroModalError div {
min-width: 0;
min-height: 0;
padding: 10px;
}

.nyroModalLink, 
.nyroModalDom, 
.nyroModalForm, 
.nyroModalFormFile {
position: relative;
padding: 10px;
min-height: 250px;
min-width: 250px;
max-width: 1000px;
}

.nyroModalImage, 
.nyroModalSwf, 
.nyroModalIframe, 
.nyroModalIframeForm {
position: relative;
overflow: hidden;
}

.nyroModalImage img {
overflow: hidden;   vertical-align: top;
}

.nyroModalHidden {
left: -9999em;
top: -9999em;
}

.nyroModalLoad {
position: absolute;
width: 100px;
height: 100px;
background: #fff url(img/ajaxLoader.gif) no-repeat center;
padding: 0;
}

.nyroModalPrev, 
.nyroModalNext {
outline: none;
position: absolute;
top: 0;
height: 60%;
width: 150px;
min-height: 50px;
max-height: 300px;
cursor: pointer;
text-indent: -9999em;
background: transparent url('data:image/gif;base64,AAAA') left 50% no-
repeat;
}

.nyroModalImage 
.nyroModalPrev, 
.nyroModalImage 
.nyroModalNext {
height: 100%;
width: 40%;
max-height: none;
}

.nyroModalPrev {
left: 0; background-image: url(img/prevmob.png);
}

.nyroModalPrev:hover{}
.nyroModalNext {
right: 0;
background-position: right 50%; background-image: url(img/nextmob.png);
}

.nyroModalNext:hover{}

---

虽然我可能错了，但我不认为只有CSS才能在不改变HTML的情况下解决这个问题。这里的问题是，您有两个不相关的元素（.nyroModalImg和.nyromodataltle），它们都固定在一个位置上（也就是说，它们恰好放置在一个位置上，并且不会影响其他元素的位置）。此外，其中一个尺寸可变。因为您希望它们的位置是相关的（nyromodataltle的顶部应该正好位于.nyroModalImg的底部），所以您必须对DOM执行一些更改

有一个相当简单的解决方法，虽然不能完全解决您的问题，但会有所帮助。更改.nyromodataltle的一些属性将允许您将其显示为位于屏幕顶部居中位置的黑色条。除非图像大于窗口，否则两个元素不会重叠：

.nyroModalTitle {
    position: fixed;
    text-align: center;
    top: 0 !important;
    left: 0 !important;
    width: 100%;
    margin: 0;
    word-wrap: break-word;
    font-size: 4em;
    background-color: #000000;
    color: #ffffff;
}

此外，我建议您从.nyroModalCont中删除border属性，因为它会使其在边界上流动并显示滚动条：

.nyroModalCont {
    overflow: hidden;
    position: absolute;
    // border: 4px solid #777; <- Remove this
    margin: 25px;
    background: #fff;
}

.nyroModalCont{
溢出：隐藏；
位置：绝对位置；
//border:4px solid#777；哇！你真是个天才！非常感谢你。我只想让它看起来整洁，但我只是在学习，所以它有点超出了我的能力。我的下一个问题是滚动条：-）我真是太感谢你了。只要它在手机和桌面上看起来不错，这就是我在这里努力实现的全部目标。我可能会喜欢botto上的文本老实说，这是一个噩梦般的改变吗？好的，我自己做的：-）底部：0！重要；再次感谢你，你是一个超级明星！当你登录到该页面时，我的最后一个问题是“喜欢”按钮在它所在的位置不起作用。我认为它的顶部有一个透明层，如果你有sec mate，它可以用CSS修复。登录是test12345@aol.com密码：qwerty非常感谢。