如何在行内块元素之间添加相等的空间？

Question

我不想用块内容自动填充空间。我希望固定宽度块之间的间距相等，这也很灵活。

我能做到这一点通过增加padding-right: whatever;再增加另一个padding-right: 0;到.last块，但这是非常原始的，不适合移动设备。

我的代码：https : //jsfiddle.net/9twy5drd/1/

.container {
  width: 100%;
  border: 1px solid red;
  text-align: center;
  padding: 5px 0;
}
.container .block {
  display: inline-block;
  border: 1px solid green;
  padding: 10px;
}

.container2 {
  width: auto;
  border: 1px solid red;
  padding: 5px;
}
.container2 .block {
  display: inline-block;
  border: 1px solid green;
  padding: 10px;
  margin: 0 47px 0 0;
}
.container2 .block.last {
  margin: 0;
}

<div class="container">
  <div class="block">Some block</div>
  <div class="block">Some block</div>
  <div class="block">Some block</div>
  <div class="block">Some block</div>
</div>

<p>What we want, but not with fixed method:</p>

<div class="container2">
  <div class="block">Some block</div>
  <div class="block">Some block</div>
  <div class="block">Some block</div>
  <div class="block last">Some block</div>
</div>

Answer 1

你可以使用Flexbox和justify-content: space-between;

.container {
  width: 100%;
  border: 1px solid red;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 5px 0;
}
.container .block {
  border: 1px solid green;
  padding: 10px;
}

<div class="container">
  <div class="block">Some block</div>
  <div class="block">Some block</div>
  <div class="block">Some block</div>
  <div class="block">Some block</div>
</div>

这是不支持 .js 的旧浏览器的 js 解决方案Flexbox。我margin-left为每个block元素计算以在元素之间创建相等的间距。还必须删除 HTML 中的空格。

$(window).on("resize", function() {
  var block = $('.container > .block');
  var count = block.length;
  var bWidth = block.outerWidth();
  var pWidth = $('.container').innerWidth();

  var margin = (pWidth - (bWidth * count)) / (count - 1);

  if (margin > 0) block.not(':last').css('margin-right', margin);
}).resize();

.container {
  width: 100%;
  border: 1px solid red;
  text-align: center;
  padding: 5px 0;
}
.container .block {
  border: 1px solid green;
  display: inline-block;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="block">Some block</div><div class="block">Some block</div><div class="block">Some block</div><div class="block">Some block</div>
</div>