0
のためのリストスタイルを作成し、説明します。私は記事タイトルを持っているとしましょう：3つの方法でお金を稼ぐと、リストに記事があります：は、どのようにそれが<strong>タイトル</strong>、<strong>画像</strong>示し、そのようなことを私はリスト形式に記事を分割しようとしている記事
（サブタイトル）3.スリープ・オール・ザ・デイ記述）、
（サブタイトル）まあ（少し説明が続いた後、画像、）と
（サブタイトルを食べる2.）1.テレビ（その後、画像、その後に少しの説明が続きます） ...ユーザーは、次のまたは前のボタンをクリックして、それぞれ次のまたは前のリストを表示します。 
これまでのところ、私はこれを考え出すことができましたより良く理解するためのサンプル画像を参照してください：
.logg-list {
overflow: hidden;
margin-top: 5px;
float: left;
width: 619px;
}
.logg-list-controls {width: 100%;
top: 1px;
z-index: 2;
cursor: pointer;
margin-bottom: 5px;
}
a.logg-list-nav-left {
float: left;
background-color: #042a54;
color: #fff;
font-size: 14px;
line-height: 38px;
width: 88px;
height: 40px;
font-style: normal;
font-weight: 400;
text-align: center;
text-decoration: none;
}
a.logg-list-nav-right {
float: right;
background-color: #042a54;
color: #fff;
font-size: 14px;
line-height: 38px;
width: 88px;
overflow: hidden;
font-style: normal;
font-weight: 400;
text-align: center;
text-decoration: none;
}
.logg-list-content {
width: 6190px;
max-height: 600px;
overflow: hidden;
}
.list-number-title {
position: relative;
top: -30px;
text-align: center;
width: 100%;
display: inline-block;
overflow: hidden;
}
.list-item-title {
display: inline-block;
font-weight: 700;
font-size: 22px;
margin-top: 0;
margin-bottom: 0;
overflow: hidden;
}
.list-image {
width: 619px;
height: 400px;
overflow: hidden;
}
.list-description {
margin-top: 22px;
display: block;
overflow: hidden;
width: 619px;
height: auto;
float: left;
}<div class="logg-list">
\t \t <div class="logg-list-controls">
\t \t \t <a class="logg-list-nav-left" href="#" style="cursor: pointer;">
\t \t \t \t <i class="fa fa-caret-left"></i> Prev
\t \t \t </a>
\t \t \t <a class="logg-list-nav-right" href="#" style="cursor: pointer;">
\t \t \t \t Next <i class="fa fa-caret-right"></i>
\t \t \t </a>
\t \t </div>
\t \t <div class="logg-list-content pull-left">
\t \t \t <div class="list-number-title">
\t \t \t \t <h2 class="list-item-title">10. Longer Title made from long poster</h2>
\t \t \t </div>
\t \t \t <div class="list-image">
\t \t \t \t <img src="http://placehold.it/619x400.png?text=no+image" alt="Default Image" itemprop="image">
\t \t \t </div>
\t \t \t <div class="list-description">
\t \t \t \t Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est.
\t \t \t \t <p>Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem.</p>
\t \t \t \t <p>In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.</p>
\t \t \t </div>
\t \t \t <!-- Another List Here -->
\t \t \t <div class="list-number-title">
\t \t \t \t <h2 class="list-item-title">9. He belongs to you.</h2>
\t \t \t </div>
\t \t \t <div class="list-image">
\t \t \t \t <img src="http://placehold.it/619x400.png?text=no+image" alt="Default Image" itemprop="image">
\t \t \t </div>
\t \t \t <div class="list-description">
\t \t \t \t Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est.
\t \t \t \t <p>Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem.</p>
\t \t \t \t <p>In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.</p>
\t \t \t </div>
\t \t </div>
\t </div>ここに私の挑戦は今だ....
- 字幕が表示されません。
- 説明が長くなることがありますが、
.list-descriptionのmax-heightの値を削除すると、次の画像が表示されます。
- あなたは 'リスト番号-title' div要素を意味していますか？ – Tom
はい.list-number-titleはサブタイトルの保留です。 –