如何使用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