我想创建一些几乎与 Facebook 图像模式完全相同的东西，其中当用户滚动浏览评论时图像是固定的。我正在尝试用不同的方法来应用overflow: hidden到一个 div 和overflow: scroll另一个 div。我什至考虑将其应用到他们的父母身上。这是我尝试过的代码：<div class="row container border border-primary"> <div class="image col border"> Image </div> <div class="text-section col border"> Comments </div></div>div.image { height: 300px; overflow: hidden;}div.text-section { height: 1000px; overflow: scroll;}div.container { height: 300px;}普朗克
1 回答
心有法竹
TA贡献1866条经验 获得超5个赞
我想有这样的代码。蓝色（图像）保持固定在左侧，而您可以滚动右侧的绿色部分（评论）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#container { background: red; width: 400px; height: 150px; display: flex; }
#image { background: url("https://i1.adis.ws/i/canon/canon-pro-best-landscape-lenses-1-1140?w=200&aspect=4:3&qlt=70&sm=aspect&fmt=jpg&fmt.options=interlaced&fmt=jpg&fmt.options=interlaced&bg=rgb(255,255,255)"); width: 200px; height: 150px; }
#comments { background: #eee; width: 200px; overflow: scroll; padding: 0 10px 20px 10px; font-family: Verdana; color: black; }
</style>
</head>
<body>
<div id="container">
<div id="image"></div>
<div id="comments">
<h3 style="color: red;">Comments</h3>
<p>Nice!</p>
<p>Good!</p>
<p>Wonderful</p>
<p>Bah...</p>
<p>Strange</p>
<p>Nice again</p>
<p>Amazing</p>
<p>Beautiful</p>
<p>Great</p>
<p>I don’t like it</p>
<p>Yes, nice</p>
<p>Super</p>
<p>Normal</p>
<p>Ok...</p>
<p>Nice</p>
<p>Bah</p>
<p>Great</p>
<p>Nice</p>
<p>I like it</p>
<p>Normal</p>
</div>
</div>
</body>
</html>
- 1 回答
- 0 关注
- 71 浏览
添加回答
举报
0/150
提交
取消