如何使用html/css在內容的兩側顯示圖像？

Question

我是新來的CSS和頁面上的工作，我想呈現如下 -

如何編寫CSS使得內容留在中心，而圖片上左邊垂直漂浮它的右側？

Answer 1

將圖像放入容器中，然後應用position: absolute。

.wrapper { 
 
    position: relative; 
 
    width: 1024px; 
 
} 
 

 
.container { 
 
    margin: 0 auto; 
 
    width: 600px; 
 
    height: 300px; 
 
    background-color: #ccc; 
 
} 
 

 
.left, .right { 
 
    position: absolute; 
 
    width: 200px; 
 
    text-align: center; 
 
} 
 

 
.left { 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
.right { 
 
    top: 0; 
 
    right: 0; 
 
}

<div class="wrapper"> 
 
    <div class="left"> 
 
    <img src="http://placehold.it/100"> 
 
    <img src="http://placehold.it/120"> 
 
    </div> 
 
    <div class="container">Main content</div> 
 
    <div class="right"> 
 
    <img src="http://placehold.it/50"> 
 
    <img src="http://placehold.it/150"> 
 
    </div> 
 
</div>

Answer 2

您可以使用浮動列在網格系統，例如Twitter的引導或基金會。然後你可以使它響應。我建議粉底：http://foundation.zurb.com/sites/docs/grid.html