并排浮动两个Div，并保持它们之间的恒定距离

Question

在我的网站页脚中，我有两个div，分别使用flexbox和下面的CSS左右浮动。在移动设备上看起来还不错，除非我的问题是最大化屏幕时两个div之间的距离越来越大。有没有一种方法可以使它们之间的距离保持相同，以便在放大屏幕时它们不会变宽？我想将它们放在屏幕中央。

#wrapper {
  display: flex;
}

#left {
  flex: 0 0 50%;
}

#right {
  flex: 1;
}

  <div id="wrapper" style="position:relative;">

    <div id="left" style="color:#ddd;background-color:#282E34;text-align:center;padding:50px 80px;text-align: center;">
      <p><b>Leeds</b><br />
        <br>
        Suite 1<br />
        5th Floor <br />
        31/32 Park Row <br />
        Leeds <br />
        England<br />
        LS1 5JD<br />
      </p>
    </div>

    <div id="right" style="color:#ddd;background-color:#282E34;text-align:center;padding:50px 80px;text-align: center;">
      <p><b>Kuala Lumpur</b><br />
        <br>
        Level 16<br />
        Jalan Stesen Sentral 5<br />
        1 Sentral<br />
        KL Sentral<br />
        50470 Kuala Lumpur<br />
        Malaysia<br />
        <br />
      </p>
    </div>
  </div>
  

Answer 1

您可以执行类似的操作，并根据需要调整媒体查询的填充：

Answer 2

<!-- use justify content property to align it close to eacch other -->
#wrapper {
  display: flex;
}

#left {
  flex: 0 0 50%;
  justify-content: end !important;
}

#right {
  flex: 1;
  justify-content: start !important;
}