我想創建一些幾乎與 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 關注
- 94 瀏覽
添加回答
舉報
0/150
提交
取消