如何在内联块元素之间设置正确的间距

Question

我的例子：

可以在div内联元素之间设置相同的间距。因为自动宽度不起作用。 这是我到目前为止所得到的：

  

HTML

 <div id="frame">
      <div class="block">1</div>
      <div class="block">2</div>
      <div class="block">3</div>
      <div class="block">4</div>
    </div>
  </div>

  

CSS

#frame div {
    background-color: brown;
    padding-left: 20%;
    padding-right: 20%;
    width: auto;
    margin: 5px;
    display: inline-block;
}

Answer 1

Flexbox可能是您最好的方法，但要注意旧浏览器不支持它。

#frame div {
    background-color: brown;
    width: 20%;
    text-align:center;
}

#frame {
    display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-around; 
  justify-content: space-around; 
}

https://jsfiddle.net/02mp1yxv/

Answer 2

Flex使这一切变得简单：

＆＃13;

＆＃13;

#frame div {
  background-color: brown;
  margin: 5px;
  flex: 1;
  padding:1em;
  color:silver
}

#frame {
  display: flex;
}

＆＃13;

<div id="frame">
  <div class="block">1</div>
  <div class="block">2</div>
  <div class="block">3</div>
  <div class="block">4</div>
</div>

＆＃13;

＆＃13;

＆＃13;

对于单行表，旧版浏览器的工作也是如此：

＆＃13;

＆＃13;

#frame div {
  background-color: brown;
  display:table-cell;
  padding:1em;
  color:silver
}

#frame {
  display: table;
  width:100%;
  border-spacing: 10px 0;;
}

＆＃13;

<div id="frame">
  <div class="block">1</div>
  <div class="block">2</div>
  <div class="block">3</div>
  <div class="block">4</div>
</div>

＆＃13;

＆＃13;

＆＃13;

最新浏览器的

或网格（其中列号已知：

＆＃13;

＆＃13;

#frame div {
  background-color: brown;
  padding: 1em;
  color: silver
}

#frame {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-column-gap: 10px;
}

＆＃13;

<div id="frame">
  <div class="block">1</div>
  <div class="block">2</div>
  <div class="block">3</div>
  <div class="block">4</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

  

框架的宽度是全屏的，框架的宽度必须适合这个框架，它并不重要。

在这种情况下，您可以避免使用尚未得到良好支持的flex并使用百分比代替：

• 为每个width div
提供20％.block
• 为每个margin-right div
提供4％.block
• 在.block
上为第一个margin-left额外的4％padding-left 或设置#frame 4％{}

当然，您可以更改这些值，只要它们加起来最多为#frame的100％。

#frame {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0 0 0 4%;
}

#frame div {
    display: inline-block;
    background-color: brown;
    width: 20%;
    margin: 1em 4% 1em 0;
}

 <div id="frame">
      <div class="block">1</div>
      <div class="block">2</div>
      <div class="block">3</div>
      <div class="block">4</div>
    </div>
</div>