Question

我想为响应式网站制作图片库样式页面。根据设备和方向，页面水平显示1到4个图像。

我如何实现这一目标并确保：

图像之间的空间保持不变
无论设备如何，每行都以页面为中心，方向和图像数量。

我很感激任何指针，因为我是新手，我可能在尝试使用搜索功能找到答案时忽略了正确的术语。感谢您的时间和考虑。

#verwrapper {
  text-align:left;
  width:100%;
  margin-left: auto;
  margin-right: auto;
  padding-top:20px;
  overflow: hidden;
  background: none repeat scroll 0 0 #FFFFFF;
  text-align:center; /* for IE */ 
} 

.ver{
  position:relative;
  border-bottom:2px solid #686868;
  width:200px;
  height:310px;
  background-color:#fff;
  margin-bottom:20px;
  margin:0 auto;
  padding:0 0.5em;
  overflow:hidden;
  float:left;
}

.verbild{
  position:relative;
  height:200px;
  width:200px;
  float:left;
  outline:2px solid #C0C0C0;
  outline-offset: -2px;
}

<div id="verwrapper">
  <div class="ver">
    <div class="verbild"><img src="image1.jpg" width="200" height="200" /></div>
  </div>
  <div class="ver">
    <div class="verbild"><img src="image2.jpg" width="200" height="200" /></div>
  </div>
  <div class="ver">
    <div class="verbild"><img src="image3.jpg" width="200" height="200" /></div>
  </div>
</div>

尼克

Answer 1

对右和右使用相同的填充左侧（em或％），使用margin:0 auto。那样 -

.test1{
      margin:0 auto;
      padding:0 0.5em;   
}

Answer 2

试试这个。只需根据需要更改尺寸。

<div class="row">
  <div class="image">
    <img src="http://placehold.it/350x150"/>
  </div>
  <div class="image">
    <img src="http://placehold.it/350x150"/>
  </div>
  <div class="image">
    <img src="http://placehold.it/350x150"/>
  </div>
  <div class="image">
    <img src="http://placehold.it/350x150"/>
  </div>
</div>

<style>
  .row {width: 500px; margin: 0 auto;}
  .image {width: 25%; float: left;box-sizing: border-box; padding: 0 5px;}
  .image img { width: 100%;}
</style>

水平居中并与css间隔

2 个答案: