Question

我经营一个买卖网站。在单击卖家项目的下一页上，它会打开浮动放大（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{}

Answer 1

虽然我可能错了，但我认为在不改变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;
}

浮动图像与文本 - CSS文本对齐

1 个答案: