如何在图片右侧实现四个文本Div的2行2列布局？

核心思路是把右侧的四个文本div统一放到一个父容器里，通过Flexbox控制这个容器内的元素排列为两行两列，同时让图片和这个容器横向并排。

修改后的代码 #

HTML #

<div class="breadbody">
  <img src="https://via.placeholder.com/200.jpg" alt="example" class="breadpic">
  <!-- 新增文本容器，包裹四个文本div -->
  <div class="text-container">
    <div class="pictext">
      <div>
        <h3>are like examples thats why i do examples egg</h3>
      </div>
      <div>examples are like examples thats why i do examples eggexamples are like examples thats why i do examples egg</div>
    </div>
    <div class="pictext2">
      <div>
        <h3>here and there and thats why we do example</h3>
      </div>
      <div>examples are like examples thats why i do examples eggexamples are like examples thats why i do examples egg</div>
    </div>
    <div class="pictext3">
      <div>
        <h3>here and there and thats why we do example</h3>
      </div>
      <div>examples are like examples thats why i do examples egg but i dont do any more exampling</div>
    </div>
    <div class="pictext4">
      <div>
        <h3>example text</h3>
      </div>
      <div>example text here and here and there and thats why we do example</div>
    </div>
  </div>
</div>

CSS #

.breadbody {
  display: flex;
  flex-direction: row;
  gap: 20px; /* 图片和文本容器之间的间距 */
  flex-wrap: wrap; /* 响应式：屏幕较小时自动换行 */
}

.breadpic {
  max-width: 200px; /* 固定图片宽度，避免过大 */
  border: 5px solid green;
}

.text-container {
  display: flex;
  flex-wrap: wrap; /* 允许内部元素换行 */
  gap: 15px; /* 文本div之间的间距 */
  flex: 1; /* 让文本容器占满剩余空间 */
}

/* 给所有文本div统一设置基础样式，避免重复代码 */
.pictext, .pictext2, .pictext3, .pictext4 {
  flex: 1 1 calc(50% - 15px); /* 每行两个，减去gap的一半，保证不会溢出 */
  display: flex;
  flex-direction: column;
  padding: 10px;
  box-sizing: border-box; /* 内边距不影响宽度计算 */
}

.pictext { border: 5px solid blue; }
.pictext2 { border: 5px solid red; }
.pictext3 { border: 5px solid yellow; }
.pictext4 { border: 5px solid aqua; }

关键说明 #

1. 结构调整：新增.text-container包裹四个文本div，让.breadbody只包含图片和这个容器两个子元素，实现图片和文本区域的横向并排。
2. Flex布局控制：
   • .text-container设置flex-wrap: wrap，内部元素宽度设为calc(50% - 15px)，确保每行刚好放下两个div，同时留出间距。
   • flex: 1 1 ...中的第一个1表示元素会拉伸填充剩余空间，第二个1表示允许元素收缩，保证响应式适配。
3. 响应式优化：.breadbody添加flex-wrap: wrap，当屏幕宽度不足以同时放下图片和文本容器时，文本容器会自动换行到图片下方。

内容的提问来源于stack exchange，提问作者kj-44