css - 带有文字的 float 图片-CSS文字对齐

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

以下是CSS。它是.nyroModalTitle，用于控制文本显示。

.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{}

最佳答案

虽然我可能是错的，但我认为不存在不更改HTML的仅CSS方式即可解决此问题的方法。这里的问题是您有两个不相关的元素（.nyroModalImg和.nyroModalTitle），它们都固定在位置上（也就是说，它们正好放置在一个位置上，并且不影响其他元素的位置）。另外，其中之一是可变大小的。由于您希望它们的位置相关联（.nyroModalTitle的顶部应恰好在.nyroModalImg的底部），因此您必须对DOM进行更改。

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

.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;
}