在div旁放置圖像（在網格中）？

所以這裏是我的問題：我想把六個圖像放在這兩個div旁邊，所以它們看起來像這樣：http://i.imgur.com/olWU00o.png希望大家都能明白。這兩個面板旁邊只有一張帶有六張圖片的網格，其中包含與它們相關的信息。在div旁放置圖像（在網格中）？

  <body> 
      <div id="pagewidth"> 
      <div id="wrapper"> 
       <div class="window"> 
       <div class="message"> 
       text 
       </div> 
       </div> 
       <div class="window"> 
       <div class="message"> 
       text 
       </div> 
       </div> 
      </div> 
      </div> 
      </body>

而這裏的style.css中：

  #pagewidth { 
       width: 70%; 
       text-align: left; 
       margin: 0 auto; 
      } 
      .window { 
       -webkit-box-shadow: 0px 0px 5px 0px rgba(117, 112, 107, 0.75); 
       -moz-box-shadow: 0px 0px 5px 0px rgba(117, 112, 107, 0.75); 
       box-shadow:   0px 0px 5px 0px rgba(117, 112, 107, 0.75); 
       background-color: #D1D5D8; 
       position: relative; 
       width: 49%; 
      } 
      .message { 
       margin: 10px; 
       padding-bottom: 10px; 
      }

使用浮動：弄亂了整個設計。

來源

2015-08-20 Lnvz

嘗試使用flexbox，我非常喜歡它。這是更新的fiddle。

<div class="images-wrapper"> 
    <div class="images"> 
     <img alt="image 1" /> 
     <img alt="image 2" /> 
     <img alt="image 3" /> 
    </div> 
    <div class="images"> 
     <img alt="image 4" /> 
     <img alt="image 5" /> 
     <img alt="image 6" /> 
    </div> 
</div> 

#pagewidth { 
    display: flex; 
} 
#wrapper { 
    flex: 1; 
} 
.images-wrapper { 
    flex: 1; 
    display: flex; 
    justify-content: flex-end; 
    align-items: flex-start; 
} 
.images { 
    position: relative; 
    display: flex; 
    flex-direction: column; 
} 
img { 
    height: 100px; 
    width: 100px; 
    margin: 10px; 
}

來源

2015-08-20 16:48:37 cocoa

它很好用，但我有一個問題。如何在彼此相鄰的圖像之間創建邊距，並從網站頂部創建邊距？這就是它現在的樣子：http://i.imgur.com/QsLBtGH.png – Lnvz

您是否已將'margin'添加到'img'和'image-wrapper'？或者你可以添加填充的元素，包裝divs和圖像 – cocoa

沒關係，它的作品就像一個魅力！謝謝您的幫助！ – Lnvz

-1

使用邊距和left.right，頂部和底部。以獲得更多信息click here

來源

2015-08-20 16:30:44 hello

沒有解釋，請不要只是鏈接，解釋爲什麼它的工作原理 - 鏈接沒有任何文字說明，甚至是偉大的比賽有問題 –

呃..我不太明白。 – Lnvz

在div旁放置圖像（在網格中）？

回答

相關問題