猿问

如何重新创建 Facebook 图像模式?

我想创建一些几乎与 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;

}

普朗克


PIPIONE
浏览 72回答 1
1回答

心有法竹

我想有这样的代码。蓝色(图像)保持固定在左侧,而您可以滚动右侧的绿色部分(评论)<!DOCTYPE html><html><head>&nbsp; &nbsp;<meta charset="UTF-8">&nbsp; &nbsp;<style>&nbsp; &nbsp; &nbsp; #container { background: red; width: 400px; height: 150px; display: flex; }&nbsp; &nbsp; &nbsp; #image&nbsp; &nbsp; &nbsp;{ 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; }&nbsp; &nbsp; &nbsp; #comments&nbsp; { background: #eee; width: 200px; overflow: scroll; padding: 0 10px 20px 10px; font-family: Verdana; color: black; }&nbsp; &nbsp;</style></head><body>&nbsp; &nbsp;<div id="container">&nbsp; &nbsp; &nbsp; <div id="image"></div>&nbsp; &nbsp; &nbsp; <div id="comments">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<h3 style="color: red;">Comments</h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<p>Nice!</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<p>Good!</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<p>Wonderful</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<p>Bah...</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<p>Strange</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<p>Nice again</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<p>Amazing</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<p>Beautiful</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<p>Great</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<p>I don’t like it</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<p>Yes, nice</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<p>Super</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<p>Normal</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<p>Ok...</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<p>Nice</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<p>Bah</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<p>Great</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<p>Nice</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<p>I like it</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<p>Normal</p>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp;</div></body></html>
随时随地看视频慕课网APP

相关分类

Html5
我要回答