如何使用html / css在内容的两面显示图像？

Question

我是CSS的新手，正在处理我想呈现的页面，如下所示 -

如何编写css以使内容保持在中心，而图像在其左右两侧垂直浮动？

Answer 1

将图像放入容器中，然后应用position: absolute。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以在网格系统中使用浮动列，例如Twitter Bootstrap或Foundation。然后你也可以让它响应。我推荐基金会：http://foundation.zurb.com/sites/docs/grid.html