这个问题是典型的块级元素默认垂直布局导致的——你的iframe和aside都是块级元素，浏览器会自动把它们上下堆叠。咱们用CSS Flexbox就能轻松搞定横向排列的需求，下面是修改后的完整代码：

修改后的HTML结构 #

<div class="content-container">
  <iframe src="https://rucode.tumblr.com" width="1200" height="1400" class="embeded-website"></iframe>
  <aside class="side-social-media">
    <nav>
      <ul class="vertical-menu">
        <li><a href="#" target="_blank" class="fa fa-facebook"></a></li>
        <li><a href="#" target="_blank" class="fa fa-twitter"></a></li>
        <li><a href="#" target="_blank" class="fa fa-linkedin"></a></li>
        <li><a href="#" target="_blank" class="fa fa-youtube"></a></li>
        <li><a href="#" target="_blank" class="fa fa-instagram"></a></li>
        <li><a href="#" target="_blank" class="fa fa-snapchat-ghost"></a></li>
      </ul>
    </nav>
  </aside>
</div>

（注：我把原代码里的<p align="center">去掉了，因为Flex布局会更精准地控制对齐，不需要这个标签）

对应的CSS样式 #

.content-container {
  display: flex; /* 核心：把容器变成flex布局，子元素横向排列 */
  align-items: flex-start; /* 让iframe和菜单顶部对齐，避免菜单居中偏移 */
  gap: 15px; /* 给两者之间加个间距，视觉更舒适 */
  padding: 10px; /* 可选：给容器加内边距，避免贴边 */
}

.embeded-website {
  border: none; /* 可选：去掉iframe默认的边框 */
}

.side-social-media .vertical-menu {
  list-style: none; /* 去掉默认的列表圆点 */
  padding: 0;
  margin: 0;
}

.side-social-media .vertical-menu li {
  margin-bottom: 8px; /* 菜单项之间的垂直间距 */
}

.side-social-media .vertical-menu a {
  display: block;
  width: 40px; /* 给图标按钮设置固定宽度，保证对齐 */
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #fff; /* 根据你的需求调整图标颜色 */
  border-radius: 50%; /* 可选：把按钮改成圆形 */
}

/* 可以给每个社交图标加专属颜色，增强辨识度 */
.fa-facebook { background-color: #1877f2; }
.fa-twitter { background-color: #1da1f2; }
.fa-linkedin { background-color: #0077b5; }
.fa-youtube { background-color: #ff0000; }
.fa-instagram { background-color: #e4405f; }
.fa-snapchat-ghost { background-color: #fffc00; color: #000 !important; }

为什么这样改？ #

1. display: flex是现代布局的首选方案，它能轻松实现元素的横向/纵向排列，兼容性覆盖绝大多数现代浏览器。
2. align-items: flex-start确保两个元素的顶部对齐，不会出现菜单被垂直居中的情况。
3. 去掉了原代码里的align="middle"这类过时的属性，用CSS来控制样式更符合现代前端规范。

如果你需要兼容非常老旧的浏览器（比如IE9及以下），也可以用float方案：给.embeded-website加float: left，给.side-social-media加float: left，然后给父容器加overflow: hidden清除浮动，但Flexbox的体验和可维护性更好，更推荐使用。

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