如何重新创建 Facebook 图像模式？
我想创建几乎与 Facebook 图像模式完全相同的东西，其中图像在用户滚动评论时是固定的。我弄乱了不同的方式来应用overflow: hidden到一个 div 和overflow: scroll另一个。我什至考虑将其应用于他们的父母。这是我尝试过的代码：
<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;
}
犯罪嫌疑人X浏览 95回答 2
2回答
-
回首忆惘然
我没有 facebook，所以无法查看行为，但您可以放在position: sticky;图像容器上，这样可以将其保持在适当的位置。这也取决于你的浏览器支持，比如 ie11不支持，但还有更多方法可以做到这一点。如果您需要更多跨浏览器解决方案，请告诉我。.container { max-height: 600px; height: 100%; overflow: auto; position: relative;}div.image { height: 300px; background-color: deepskyblue; position: sticky; top: 0;}div.text-section { height: 1000px; background-color: aqua;}<div class="row container border border-primary"> <div class="image col border"> Image </div> <div class="text-section col border"> Comments </div></div> -
HUX布斯
我想像这样的代码。蓝色（图像）保持固定在左侧，而您可以滚动右侧的绿色部分（评论）<!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>
随时随地看视频慕课网APP
相关分类
JavaScript