在susy畫廊旁添加浮動區域的最佳方法？

鏈接庫中的項目數是基於搜索結果，但我想的區域來填充一個固定區域的右側，將留在它在如用戶向下滾動搜索結果庫。所以基本上，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; 
    } 
    } 
}

這裏是哪裏，我想的「浮動」元素的生活圖像：

來源

2016-09-19 Jon

林不知道如果我得到所需的結果，你可以做一個形象？ –

@SvenB我已經添加了一張我希望有意義的圖片..我想我只需要一個容器（8）包裝整個東西，然後畫廊（8 8）和右側浮動元素是（8的最後2）也許？不確定。 – Jon

您提供的HTML代碼中的「浮動元素」在哪裏？ –

您想添加一個div是固定的如：

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

右：0px將div對齊。

確保您的主div不與正確的div重疊。

basic example to show the idea。

來源

2016-09-19 21:11:26

這個工作，也有助於讓我的思維遠離想到僅僅因爲我使用susy/compass進行佈局，沒有理由將它用於頁面上的每個**元素。謝謝。 – Jon

在susy畫廊旁添加浮動區域的最佳方法？

回答

相關問題