网站图片间距正确

Question

我希望我的图片彼此相邻，中间有一点空白。但是当我做 `margin-right: 10px;在每个 div 上，最后一张图片都不会与我的标题栏对齐。

如何在中间给 div 一个 space 而最后一个 div 的右边没有 space？

注意：内容是动态的，所以我无法制作一个 div 来容纳 4 divs。

Answer 1

您可以使用 justify-content: space-between。这会在每个图像容器之间创建均匀的间距，并将第一个和最后一个元素推到父元素的边缘 div。

你的html：

.container {
      width: 346px;
    }
    .title-bar {
      background-color: #ccc;
      width: 100%;
    }
    .flex-container {
      padding: 0;
      margin: 0;
      list-style: none;
      
      -ms-box-orient: horizontal;
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -moz-flex;
      display: -webkit-flex;
      display: flex;
    }
    
    .space-between { 
      -webkit-justify-content: space-between; 
      justify-content: space-between; 
    }
    .image-container {
      background: #ccc;
      padding: 5px;
      width: 60px;
      height: 50px;
      margin: 0;
      line-height: 50px;
      color: white;
      font-weight: bold;
      font-size: 2em;
      text-align: center;
    }

<div class="container">
      <div class="title-bar">
        <h1>Title</h1>
      </div>
      <div class="flex-container space-between">
        <div class="image-container">1</div>
        <div class="image-container">2</div>
        <div class="image-container">3</div>
        <div class="image-container">4</div>
    </div>
</div>

上面代码中图像容器的样式只是一个示例 - 如果您有未知数量的 div 加载，您要么固定宽度，要么使它们流动，容器宽度将需要流畅（当然除非你想要它固定）。

Answer 2

方法有很多种，我只介绍其中一种。

编辑 1: 使用 nth-child

解决多行问题

演示： http://jsfiddle.net/s0xLfcrx/1/

HTML:

<div class="bar"></div>
<div class="box">
    <div>a</div>
    <div>b</div>
    <div>c</div>
    <div>d</div>
    <div>e</div>
    <div>f</div>
    <div>g</div>
    <div>h</div>
</div>

CSS:

.bar, .box {
    width: 460px;
}

.bar {
    background: lime;
    height: 20px;
}

.box {
    text-align: center;
    font-size: 0;
}

.box > div {
    display: inline-block;
    font-size: 16px;
    background: gold;
    width: 100px;
    margin: 0 10px;
}

.box > div:nth-child(4n+1) {
    margin-left: 0;
}

.box > div:nth-child(4n) {
    margin-right: 0;
}

原始演示（仅 1 行）：

http://jsfiddle.net/s0xLfcrx/

Answer 3

就用简单的CSS

.div { width: 25%; text-align: center; padding: 5px; box-sizing: border-box; }
.div img { display: block; margin: 0 auto; }

Answer 4

你可以用可变宽度做这样的事情：

.titlebar {
    width: calc(100% - 2px);
    display: block;
    height: 40px;
    background: blue;
}

.item25 {
    width: calc(25% - 11px);
    height: 80px;
    display: inline-block;
    background: black;
    margin-right: 10px;
}

.no-margin {
    margin-right: 0;
}

<div class="titlebar"></div>
<div class="item25"></div>
<div class="item25"></div>
<div class="item25"></div>
<div class="item25 no-margin"></div>

Answer 5

有很多方法可以做到，但如果您需要 RESPONSIVE，请使用此解决方案：

body{font-family:arial;}
h1{
  display:block;
  margin:0px;
  padding:0px;
  background:#0af;
  color:#fff;
  text-align:center;
}
.layer{
  display:block;
  overflow:auto;
}
.layer > div{
  display:block;
  float:left;
  margin:10px 10px 10px 0px;
  width:    -moz-calc(25% - 7.5px);
  width: -webkit-calc(25% - 7.5px);
  width:         calc(25% - 7.5px);
  background-color:#000;
  height:30px;
  
}
.layer > div:nth-child(4n) {
    margin-right: 0;
    background-color:#f00;
}

<h1>Title bar</h1>
<div class="layer">
  <div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div>
  <div></div><div></div>
</div>

网站图片间距正确

Website image spacing correctly

html

css

margin

spacing