jScrollPane(jscrollpane.kelvinluck.com)を使用して、一連の画像をdivと一緒に水平方向に表示しようとしています。一連の画像を機能させることができましたが、divを作成すると、その中のコンテンツは(a)divの外に出るか、(b)overflow:hiddenとラベル付けすると、スクロール効果を継承するため、一線を画しません。
私がやりたいのは、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
これも可能ですか?