如何实现div横向布局：地图容器居左，右侧放图表与下拉菜单？

这是一个学校的数据分析项目，我已经花了两天时间尝试按照目标布局（见下图）排列div，但所有div都垂直堆叠在一起，急需解决！请问如何让map-container位于左侧，右侧放置bar图表、下拉菜单和详情区域？

当前CSS代码 #

/* General resets for consistent styling */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial;
  color: #555;
  font-size: 16px;
  line-height: 1.7;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.centered-header {
   text-align: center;
   margin-top: 0;
   max-width: 100%;
   height: auto;
   position: relative;
   z-index: 1;
}

footer {
   color: #fff;
   font-size: 14px;
   text-align: center;
   position: absolute;
   bottom: 0;
}

.content {
  width: 90vw;
  max-width: 1300px;
  background-color: #00000049;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

#map-container {
  width: 100%;
  height: 500px;
  border-radius: 6px;
  overflow: hidden;
}

/* Set Legend Style */
.legend {
  padding: 6px 8px;
  font-size: 14px;
  background: black;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}

.legend i {
  width: 20px;
  height: 20px;
  float: left;
  margin-right: 8px;
  opacity: 0.7;
}

当前HTML代码 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Meteorite Landings</title>
    <link href="images/favicon.ico" rel="icon" type="image/x-icon">

    <header class="centered-header">
      <img src="images/coollogo_com-6123290.png" alt="Header Image">
    </header>

<body>

  <div class="content">
    <div id="map-container">
    <!-- Leaflet map inserted here -->
    </div>
    <div id="bar">
        <!-- Other visualizations go here -->
    </div>
    <div>
      <select id="meteoroidSelect">
        <option value="">Select a Meteoroid</option>
      </select>
    </div>
    <div id="meteoroidDetails">
      <strong>Name: </strong><span id="name"></span><br>
      <strong>Year: </strong><span id="year"></span><br>
      <strong>Mass: </strong><span id="mass"></span> grams<br>
      <strong>Recclass: </strong><span id="type"></span><br>
    </div>

      <footer>
        <p>Created by University of Denver Data Analysis Students: <a href="https://github.com/agostinger">Adam Gostinger</a>, <a href="https://github.com/jgurbb38">Jennifer Grubb</a>, and <a href="https://github.com/Ryguy57">Ryan Himes</a>.<br>
          Data Sourced from <a href="https://catalog.data.gov/dataset/meteorite-landings"> data.nasa.gov </a></p>
    </footer>
    </body>

</html>

解决方案：使用Flexbox实现横向布局 #

要实现左侧地图、右侧垂直堆叠组件的布局，只需对HTML结构做小调整，并修改CSS的Flex相关属性：

步骤1：调整HTML结构，将右侧组件统一包裹 #

把bar、下拉菜单、meteoroidDetails放到一个名为right-panel的容器中，方便统一控制右侧区域：

<div class="content">
  <div id="map-container">
    <!-- Leaflet map inserted here -->
  </div>
  <!-- 新增右侧面板容器 -->
  <div class="right-panel">
    <div id="bar">
        <!-- Other visualizations go here -->
    </div>
    <div>
      <select id="meteoroidSelect">
        <option value="">Select a Meteoroid</option>
      </select>
    </div>
    <div id="meteoroidDetails">
      <strong>Name: </strong><span id="name"></span><br>
      <strong>Year: </strong><span id="year"></span><br>
      <strong>Mass: </strong><span id="mass"></span> grams<br>
      <strong>Recclass: </strong><span id="type"></span><br>
    </div>
  </div>
  <!-- footer位置保持不变 -->
  <footer>
    ...
  </footer>
</div>

步骤2：修改CSS，添加Flex布局属性 #

.content {
  width: 90vw;
  max-width: 1300px;
  background-color: #00000049;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  /* 核心：设置为flex布局，子元素横向排列 */
  display: flex;
  gap: 30px; /* 左右区域的间距 */
  flex-wrap: wrap; /* 小屏幕自动换行，保证响应式 */
}

#map-container {
  /* 地图固定占比65%，可按需调整 */
  flex: 0 0 65%;
  height: 500px;
  border-radius: 6px;
  overflow: hidden;
}

.right-panel {
  /* 右侧区域填充剩余空间 */
  flex: 1;
  /* 右侧内部组件垂直堆叠 */
  display: flex;
  flex-direction: column;
  gap: 20px; /* 右侧内部组件的间距 */
}

/* 给bar图表设置高度，避免内容为空时塌陷 */
#bar {
  height: 300px;
  background-color: rgba(255,255,255,0.8);
  border-radius: 6px;
}

/* 小屏幕下（宽度小于900px）自动切换为垂直布局 */
@media (max-width: 900px) {
  #map-container {
    flex: 0 0 100%;
  }
}

说明 #

• display: flex让.content的子元素（地图和右侧面板）横向排列
• gap属性替代margin，更直观地控制元素间距
• flex: 0 0 65%固定地图宽度占比，flex:1让右侧面板自动填充剩余空间
• flex-wrap: wrap和媒体查询保证移动端体验，小屏幕自动切换为垂直布局

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