看起来你遇到的问题是布局方式混搭导致的——把左浮动、margin:0 auto和右浮动凑在一起用，难怪第三个盒子没法和前两个对齐。咱们来一步步修正这个问题：

问题根源 #

1. float:center是无效的CSS属性，float只有left/right/none三个可选值，这个设置完全起不到作用。
2. 第二个盒子用了margin:0 auto，这个属性是让元素在剩余可用空间里居中，但和左右浮动的元素搭配时，会打乱整体排列逻辑，直接把第三个盒子挤到下方。
3. 父容器设置了width:100%，如果页面宽度小于三个盒子的总宽度（3×340px=1020px），盒子会自动换行，所以得确保父容器有足够宽度容纳三个盒子。

修正方案：用Flexbox布局（推荐） #

Flexbox是现在最省心的布局方式，能轻松实现元素并排，还能自动处理对齐问题。把你的代码改成下面这样：

<div style="width: 100%; min-width: 1020px; height: 500px; display: flex; justify-content: space-around; align-items: flex-start;">
  <!-- Facebook盒子 -->
  <div style="width:340px;height:500px;background-color:red;">
    <div id="fb-root"></div>
    <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.11'; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>
    <div class="fb-page" data-href="https://www.facebook.com/consciousyouthuk" data-tabs="timeline" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false"><blockquote cite="https://www.facebook.com/consciousyouthuk" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/consciousyouthuk">Conscious Youth C.I.C</a></blockquote></div>
  </div>

  <!-- Twitter盒子 -->
  <div style="width:340px;height:500px;background-color:red;">
    <a class="twitter-timeline" data-width="340" data-height="500" href="https://twitter.com/Cyouthcic?ref_src=twsrc%5Etfw">Tweets by TwitterDev</a>
    <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
  </div>

  <!-- 第三个盒子 -->
  <div style="width:340px;height:500px;background-color:red;">
    <!-- 这里放第三个社交媒体的代码 -->
  </div>
</div>

代码解释 #

• display: flex：把父容器变成Flex容器，里面的子元素会自动成为Flex项目，遵循Flex布局规则。
• justify-content: space-around：让三个盒子在容器内均匀分布，左右留有留白；如果想让盒子紧密排列，改成justify-content: flex-start，或者给父容器加gap: 10px来设置盒子间的间距。
• min-width: 1020px：确保父容器至少能容纳三个340px的盒子，避免屏幕变窄时盒子换行。
• 去掉了所有浮动和margin:0 auto的设置，用Flex原生属性控制排列逻辑，更稳定可靠。

备选方案：统一用浮动布局 #

如果你更习惯用浮动，也可以把三个盒子都设置成float:left，然后给父容器加上清除浮动的样式，避免影响下方内容：

<div style="width: 100%; min-width: 1020px; height: 500px; overflow: hidden;">
  <!-- Facebook盒子 -->
  <div style="width:340px;height:500px;float:left;background-color:red;">
    <!-- 内容不变 -->
  </div>

  <!-- Twitter盒子 -->
  <div style="width:340px;height:500px;float:left;background-color:red;">
    <!-- 内容不变 -->
  </div>

  <!-- 第三个盒子 -->
  <div style="width:340px;height:500px;float:left;background-color:red;">
    <!-- 内容不变 -->
  </div>
</div>

代码解释 #

• overflow: hidden：用来清除父容器内浮动元素的影响，让父容器能正确包裹三个浮动的盒子，避免高度塌陷。
• 三个盒子都用float:left，就能整齐并排，前提是父容器宽度足够容纳它们。

这样修改后，三个盒子就能完美并排显示啦！

内容的提问来源于stack exchange，提问作者user9159332