如何实现图片容器居左、产品套餐选项容器居右并排布局？

你的布局无法实现左右并排的原因主要有三点：

1. 使用了Bootstrap的col-md-4/col-md-8网格类，但未引入Bootstrap CSS框架，这些类无法生效
2. 外层.container已设置flex布局，但内部嵌套的.row是块级元素，破坏了flex的横向排列逻辑
3. 部分CSS属性重复定义（如.image-container的宽度被设置两次）

以下是修复后的完整代码：

修正后的CSS #

.productname2 {
  font-family: 'Poppins', sans-serif;
  font-size: 30px;
  text-align: center;
}

input[type=checkbox] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 1px;
  height: 1px;
  border: 1px solid #999;
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}

input[type=checkbox]:checked {
  background-color: #007bff;
}

.checkboxtest {
  max-width: 20px;
  opacity: 0;
  position: absolute;
}

.checkboxtest+label {
  position: relative;
  padding-left: 30px;
  cursor: pointer;
  font-size: 18px;
  color: #333;
  display: inline-block;
  margin-bottom: 10px;
}

.productname {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  text-align: center;
}

.container {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 20px;
  background-color: #fff;
  border: 1px solid #e6e6e6;
  gap: 20px; /* 控制图片与套餐容器的间距 */
}

.image-container {
  width: 300px;
  height: 300px;
  overflow: hidden;
  border: 2px solid #252a32;
  border-radius: 10px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bundle-header {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 10px;
  font-family: 'Poppins', sans-serif;
}

.bundle-header-1, .bundle-header-2 {
  font-size: 28px;
  font-weight: bold;
  margin: 20px 0 10px;
  text-align: center;
  font-family: 'Poppins', sans-serif;
}

.bundle-options {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  width: 100%;
}

.bundle-option {
  width: 33.33%;
  text-align: center;
  padding: 10px;
  border: 1px solid #e6e6e6;
  cursor: pointer;
}

.bundle-option.active {
  background-color: #fff;
  border-color: #f45b69;
  color: #f45b69;
}

.bundle-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bundle-save {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
}

.add-to-cart {
  background-color: #f45b69;
  color: #fff;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}

.button {
  display: inline-block;
  padding: 10px 20px;
  margin-top: 20px;
  background-color: #666;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
}

.button:hover {
  background-color: #333;
}

.bundle-container-1, .bundle-container-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #e6e6e6;
}

.bundle-wrapper {
  flex: 1; /* 让套餐容器占据剩余宽度 */
  display: flex;
  flex-direction: column;
  gap: 15px; /* 两个套餐容器之间的间距 */
}

.bundle-option input[type="checkbox"] {
  float: center;
  margin-right: 10px;
  margin-top: 6px;
}

.bundle-option label {
  display: inline-block;
  vertical-align: middle;
}

修正后的HTML #

<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">

<div class="container">
  <div class="image-container">
    <img src="https://via.placeholder.com/300" alt="Product Image">
  </div>
  <div class="bundle-wrapper">
    <div class="bundle-container-1">
      <label for="bundle1" class="bundle-header-1">Choose your bundle:</label>
      <div id="container1" class="bundle-options">
        <div class="bundle-option active" data-months="3" data-image="" data-url="">
          <input type="checkbox" id="bundle1-0" name="ch" value="0" class="checkboxtest" data-texto="Texto 1">
          <label for="bundle1-0" class="productname">3 Month Supply -<br>6x Micro-Infusion Treatments</label>
        </div>
        <div class="bundle-option" data-months="6" data-image="" data-url="">
          <input type="checkbox" id="bundle2-0" name="ch" value="1" class="checkboxtest" data-texto="Texto 2">
          <label for="bundle2-0" class="productname">2 Month Supply -<br>4x Micro-Infusion Treatments</label>
        </div>
        <div class="bundle-option" data-months="12" data-image="" data-url="">
          <input type="checkbox" id="bundle3-0" name="ch" value="2" class="checkboxtest">
          <label for="bundle3-0" class="productname">1 Month Supply -<br>2x Micro-Infusion Treatments</label>
        </div>
      </div>
      <div class="bundle-footer">
        <div id="footer">
          <span id="texto1"></span>
          <span id="texto2"></span>
          <span id="texto3"></span>
        </div>
      </div>
    </div>
    <div class="bundle-container-2">
      <label for="bundle2" class="bundle-header-2">Choose your serums:</label>
      <div class="bundle-options">
        <div class="bundle-option active" data-months="3" data-image="" data-url="">
          <input type="checkbox" id="bundle4-0" name="ch" value="4" class="checkboxtest">
          <label for="bundle4-0" class="productname">Rejuvenating Serum</label>
        </div>
        <div class="bundle-option" data-months="6" data-image="" data-url="">
          <input type="checkbox" id="bundle5-0" name="ch" class="checkboxtest">
          <label for="bundle5-0" class="productname">Hydra-Soothing Serum</label>
        </div>
        <div class="bundle-option" data-months="12" data-image="" data-url="">
          <input type="checkbox" id="bundle6-0" name="ch" value="5" class="checkboxtest">
          <label for="bundle6-0" class="productname2"><br>Both Serums</label>
        </div>
      </div>
    </div>
  </div>
</div>

关键修改点 #

1. 移除了无效的Bootstrap网格类（.row/.col-md-*），改用纯Flexbox实现布局
2. 添加.bundle-wrapper容器包裹两个套餐选项，确保它们在右侧垂直排列
3. 给.container添加gap属性控制元素间距，替换原有的margin-left
4. 合并重复的CSS样式（如.bundle-header-1和.bundle-header-2）
5. 调整.container的align-items为flex-start，让元素顶部对齐更自然

内容的提问来源于stack exchange，提问作者Marcelo Dos Santos