html - 在 susy gallery 旁边添加 float 区域的最佳方法？

Question

这是代码笔的链接 so far

库中的元素数量基于搜索结果，但我希望右侧区域填充固定区域，当用户向下滚动搜索结果库时该区域将保持在原位置。所以基本上，8 张中的最后 2 张带有与画廊卡片样式相同的“卡片”，但固定高度约为 2 张画廊卡片的高度。希望这是有道理的!

<div class="wrap">
  <div class="compare-gallery">
    <div class="gallery-item">
      <div class="gallery-image"><img src="http://fakeimg.pl/185x278/"></div>
        <div class="gallery-text">
          <h5>2015</h5>
          <h4>A title here</h4>
          <p>How's this? Would it helped if I got out and pushed? It might. Captain Solo, Captain Solo...sir, might I suggest that you... It can wait. he bucket of bolts is never going to get us past that blockade. This baby's got a few surprises left in her, sweetheart. Come on! Come on! Switch over. Let's hope we don't have a burnout. See? Someday you're going to be wrong, and I hope I'm there to see it. Punch it!</p>
        </div>
      </div>
    <div class="gallery-item">
      <div class="gallery-image"><img src="http://fakeimg.pl/185x278/"></div>
        <div class="gallery-text">
          <h5>2015</h5>
          <h4>A title here</h4>
          <p>How's this? Would it helped if I got out and pushed? It might. Captain Solo, Captain Solo...sir, might I suggest that you... It can wait. he bucket of bolts is never going to get us past that blockade. This baby's got a few surprises left in her, sweetheart. Come on! Come on! Switch over. Let's hope we don't have a burnout. See? Someday you're going to be wrong, and I hope I'm there to see it. Punch it!</p>
        </div>
      </div>
    <div class="gallery-item">
      <div class="gallery-image"><img src="http://fakeimg.pl/185x278/"></div>
        <div class="gallery-text">
          <h5>2015</h5>
          <h4>A title here</h4>
          <p>How's this? Would it helped if I got out and pushed? It might. Captain Solo, Captain Solo...sir, might I suggest that you... It can wait. he bucket of bolts is never going to get us past that blockade. This baby's got a few surprises left in her, sweetheart. Come on! Come on! Switch over. Let's hope we don't have a burnout. See? Someday you're going to be wrong, and I hope I'm there to see it. Punch it!</p>
        </div>
      </div>
    <div class="gallery-item">
      <div class="gallery-image"><img src="http://fakeimg.pl/185x278/"></div>
        <div class="gallery-text">
          <h4>A title here</h4>
          <p>How's this? Would it helped if I got out and pushed? It might. Captain Solo, Captain Solo...sir, might I suggest that you... It can wait. he bucket of bolts is never going to get us past that blockade. This baby's got a few surprises left in her, sweetheart. Come on! Come on! Switch over. Let's hope we don't have a burnout. See? Someday you're going to be wrong, and I hope I'm there to see it. Punch it!</p>
        </div>
      </div>
 </div>
</div>

和CSS:

@import 'susy';
@import 'compass';
@include border-box-sizing;


.compare-gallery {
  @include clearfix;
  margin-top: 80px;
}

.gallery-item {
  background-color: rgba(255, 255, 255, 0.6);
  @include box-shadow(0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23));
  @include gallery(3 of 8 split);
  margin-bottom: gutter(8);
  .gallery-image {
    float: left;
  }
  .gallery-text {
    h5 {
      float: right;
    }
  }
}

这是我希望“ float ”元素所在位置的图像:

Answer 1

您想添加一个固定的 div，如:

.page-side {
  position:fixed;
  right:0px;
  width: 200px;
}

right:0px 将 div 向右对齐。

确保您的主 div 没有与正确的 div 重叠。

basic example to show the idea .