如何为文章
我正在尝试将文章拆分为列表格式，以便显示标题，图像，然后说明。假设我有一篇文章标题：3种赚钱方式，然后我将文章放在列表中，如下：
（副标题）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">
<div class="logg-list-controls">
<a class="logg-list-nav-left" href="#" style="cursor: pointer;">
<i class="fa fa-caret-left"></i> Prev
</a>
<a class="logg-list-nav-right" href="#" style="cursor: pointer;">
Next <i class="fa fa-caret-right"></i>
</a>
</div>
<div class="logg-list-content pull-left">
<div class="list-number-title">
<h2 class="list-item-title">10. Longer Title made from long poster</h2>
</div>
<div class="list-image">
<img src="http://placehold.it/619x400.png?text=no+image" alt="Default Image" itemprop="image">
</div>
<div class="list-description">
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.
<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>
<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>
</div>
<!-- Another List Here -->
<div class="list-number-title">
<h2 class="list-item-title">9. He belongs to you.</h2>
</div>
<div class="list-image">
<img src="http://placehold.it/619x400.png?text=no+image" alt="Default Image" itemprop="image">
</div>
<div class="list-description">
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.
<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>
<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>
</div>
</div>
</div>
现在是我的挑战......
- 字幕未显示。
- 某些说明可能很长，如果我删除
max-height中的.list-description值，则会显示下一张图片。
1 个答案:
答案 0 :(得分：1)
我会删除top上的.list-number-title定位，这会显示您的标题。另外，我将删除.logg-list-content上设置为6190px的宽度。将其设置为100％，示例正确显示。
考虑最大高度 - 如果要限制说明的大小，则应在.list-description和不 .logg-list-content上设置。更好的方法是将描述限制为一定数量的字符，而不是强制最大高度。
.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: 100%;
overflow: hidden;
}
.list-number-title {
position: relative;
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;
max-height: 100px;
float: left;
}<div class="logg-list">
<div class="logg-list-controls">
<a class="logg-list-nav-left" href="#" style="cursor: pointer;">
<i class="fa fa-caret-left"></i> Prev
</a>
<a class="logg-list-nav-right" href="#" style="cursor: pointer;">
Next <i class="fa fa-caret-right"></i>
</a>
</div>
<div class="logg-list-content pull-left">
<div class="list-number-title">
<h2 class="list-item-title">10. Longer Title made from long poster</h2>
</div>
<div class="list-image">
<img src="http://placehold.it/619x400.png?text=no+image" alt="Default Image" itemprop="image">
</div>
<div class="list-description">
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.
<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>
<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>
</div>
<!-- Another List Here -->
<div class="list-number-title">
<h2 class="list-item-title">9. He belongs to you.</h2>
</div>
<div class="list-image">
<img src="http://placehold.it/619x400.png?text=no+image" alt="Default Image" itemprop="image">
</div>
<div class="list-description">
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.
<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>
<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>
</div>
</div>
</div>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？