0

我正在尝试使用 jScrollPane （ jScrollPane （ jscrollpane.kelvinluck.com ）显示一系列图像，以及水平的 div 。我设法使这一系列图像工作，但是当我创建 div 时，其中的内容要么（a）在 div 之外，要么（b）当我将其标记为溢出：隐藏时，它继承了滚动效果，因此不会下线。

我想做的是让我的 div 中的文本像普通文本一样，并在它接近容器的宽度时下拉一行。

这是我的代码，

<div class="scroll-pane">                                                                           
    <ul>
        <li ><img src="img/portfolio1.gif" /> <span></span></li>
        <li ><img src="img/portfolio2.gif"/> <span></span></li>
        <li ><img src="img/portfolio3.gif"/> <span></span></li>
        <li>
            <div class="info">
                <h2>Modern Palace Resident</h2>
                <p>This is going to describe the apartment a little bit, including design philosophy, themes for the apartments, and why you chose to do it this way. This can excite them about the apartment, which will lead them to buy. You can leave a link <a href="apt.php">here</a> as well.</p>
            </div>
        </li>
    </ul>
</div>

这是相关的 SCSS

.scroll-pane{
    width: 100%;
    height: 450px;
    overflow: scroll;
    white-space:nowrap;

    ul {
        float:left;
        list-style-type:none;
        li{
            float:left;
            .info{
                float:left;
                width:300px;
                height:420px;
                background-color:gray;
                overflow:hidden;
            }
            img{
                height:420px;
            }
        }
    }
}

相关部分是

.info{
    float:left;
    width:300px;
    height:420px;
    background-color:gray;
    overflow:hidden;
}

我需要在这里编辑什么，以便h2, 和p尊重.info容器？

这甚至可能吗？

4

1 回答 1

0

我不确定 CSS 在上述语法中是如何工作的。我不得不改变它，让它首先像这样在小提琴中工作：

.scroll-pane{
    width: 100%;
    height: 450px;
    overflow: scroll;
    white-space:nowrap;
}

.scroll-pane ul{
    float:left;
    list-style-type:none;
}

.scroll-pane ul li{
    float:left;
}

.scroll-pane ul li img{
    height:420px;
}

.info{
    display: block;
    clear: left;
    width:300px;
    height:420px;
    background-color:gray;
    overflow:hidden;
}

无论如何，您的文本不换行的原因是因为在您的.scroll-pane样式中您已经设置white-space:nowrap;了，它是由您的容器继承的。

要使信息文本换行添加white-space:normal;到.info.

演示

因为我必须手动修复 CSS 才能在小提琴中首先工作，如果有什么看起来不正确，请随时告诉我，或者添加您自己的小提琴并发布链接，我会查看它。

无论如何，包装应该是您添加white-space:normal;到.info样式中的有效包装

于 2012-11-29T00:41:25.530 回答