Question

我正在尝试使用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容器？

这甚至可能吗？

Answer 1

我不确定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。

DEMO

由于我必须手动修复CSS才能在小提琴中工作，所以如果看起来不对劲，请随时告诉我，或者添加自己的小提琴并发布链接并查看它。< / p>

无论如何，包装应该是white-space:normal;添加.info样式的工作

文本不会下拉一行，溢出：隐藏，jScrollpane

1 个答案:

DEMO