css 将图像粘贴到列中并将其发布

oxf4rvwz 于 2023-10-21 发布在其他

关注(0)|答案(2)|浏览(95)

我想列2 MainImage坚持/停留在其位置，而滚动，当列1结束列2将与它。它也尝试了“位置：坚持”什么也没发生，也许我错过了我的css上的东西。

.column2 {
  position: sticky;
  top: 10;
}

<div class="row">
  <div class="column1">
    <div class="row">
      <div class="column">Image1</div>
      <div class="column">Image2</div>
      <div class="column">Image3</div>
    </div>
    <div class="row">
      <div class="column">Image4</div>
      <div class="column">Image5</div>
      <div class="column">Image6</div>
    </div>
    <div class="row">
      <div class="column">Image7</div>
      <div class="column">Image8</div>
      <div class="column">Image9</div>
    </div>
  </div>
  <div class="column2">
    <img src="MainImage">
  </div>
</div>

css

来源：https://stackoverflow.com/questions/77267776/stick-image-inside-a-column-and-release-it

2条答案

按热度按时间

6qqygrtg1#

你必须改变div的顺序，像这样：

.column2 {
  position: sticky;
  top: 10px;
}

<div class="row">
  <div class="column2">
    <img src="MainImage">
  </div>
  <div class="column1">
    <div class="row">
      <div class="column">Image1</div>
      <div class="column">Image2</div>
      <div class="column">Image3</div>
    </div>
    <div class="row">
      <div class="column">Image4</div>
      <div class="column">Image5</div>
      <div class="column">Image6</div>
    </div>
    <div class="row">
      <div class="column">Image7</div>
      <div class="column">Image8</div>
      <div class="column">Image9</div>
    </div>
    <div class="row">
      <div class="column">Image10</div>
      <div class="column">Image11</div>
      <div class="column">Image12</div>
    </div>
    <div class="row">
      <div class="column">Image13</div>
      <div class="column">Image14</div>
      <div class="column">Image15</div>
    </div>
  </div>

</div>

赞(0）回复(0）举报 2023-10-21

dzjeubhm2#

试试这个，希望对你有帮助。

.row {
  display: flex;
}

.column1 {
  flex: 3; /* Adjust the flex value to control the width of column1 */
}

.column2 {
  flex: 1; /* Adjust the flex value to control the width of column2 */
  position: sticky;
  top: 0;
}

<div class="row">
  <div class="column1">
    <div class="row">
      <div class="column">Image1</div>
      <div class="column">Image2</div>
      <div class="column">Image3</div>
    </div>
    <div class="row">
      <div class="column">Image4</div>
      <div class="column">Image5</div>
      <div class="column">Image6</div>
    </div>
    <div class="row">
      <div class="column">Image7</div>
      <div class="column">Image8</div>
      <div class="column">Image9</div>
    </div>
  </div>
  <div class="column2">
    <img src="MainImage" alt="Main Image">
  </div>
</div>

赞(0）回复(0）举报 2023-10-21

我来回答

css 将图像粘贴到列中并将其发布

2条答案

相关问题

热门标签

最新问答