三个浮动div之间的差距相等

Question

我有三个div,每个都是随机大小,而我希望每个间隙都有相同的宽度(虚线):

一些例子:

<Left Div>...............<Mid Div>..............<Right Div>
<Larger Left Div>...........<Mid Div>...........<Right Div>
<Left Div>...........<Mid Div>...........<Larger Right Div>

我可以使用float: left;和轻松对齐左右div float: right;,但无法确定如何使中间div居中.我曾考虑使用flexbox或tables或玩耍使用text-align: justify;

如果有帮助的话,我已经制作了JS Fiddle Demo.谢谢你的任何提示.

Answer 1

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

* {
  margin: 0;
}
.mainframe {
  display: flex;
  justify-content: space-between;
}

<div class="mainframe">
  <div class="left">Lorem ipsum</div>
  <div class="center">"Center Me!"</div>
  <div class="right">Lorem ipsum dolor sit</div>
</div>