html - 在小屏幕中将标题和段落左侧的图像对齐，然后在它们之间对齐

Question

我正在尝试创建一个标题和文本 + 图像 block ，其中:- 在大屏幕上，它们会左右交替。- 在较小的屏幕上，图像将位于标题下方和段落文本上方。

This is an example of how it should look like

我尝试使用 flexbox，但标题和文本不能很好地配合。我尝试了内联 block ，但图像不会在包装器中垂直对齐。

我正在将它添加到一个方形空间网站，但该模板不使用 Bootstrap ，所以我不能使用它。

<div class="alternating-content-block even">
  <div class="heading">
    <h2>Heading</h2>
  </div>
  <div class="image">
    <img src="https://images.squarespace-cdn.com/content/v1/56099b28e4b0e9a8dd53c467/1474681761217-VA1F29OQYAQX8IIW1018/ke17ZwdGBToddI8pDm48kFNHtaRIWeOk0XtEG2Iz2ptZw-zPPgdn4jUwVcJE1ZvWhcwhEtWJXoshNdA9f1qD7Xj1nVWs2aaTtWBneO2WM-tqmpERyOMWWNh4XLI3lmIESCawszvU15S2rzqX3HdiIw/image-asset.jpeg?format=300w" />
  </div>
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer venenatis posuere urna et sagittis. In elit elit, venenatis quis leo ut, accumsan lobortis arcu. Donec ut ultricies lorem. Donec id eleifend ipsum. In mi massa, lacinia non facilisis at, vehicula eget purus. Pellentesque dui dolor, scelerisque at ultrices at, fermentum sit amet dui. Mauris posuere gravida ornare. Sed id consectetur lorem. Integer pulvinar mi sed mi dignissim blandit. Vestibulum aliquet ex elit, vitae condimentum nibh faucibus id. Aliquam rhoncus risus non turpis pulvinar, vitae eleifend turpis eleifend. Etiam sed mi eget lorem pharetra imperdiet id ut est. Praesent mollis suscipit velit pharetra posuere. In in accumsan nisl.
  </div>
</div>
<div class="alternating-content-block odd">
  <div class="heading">
    <h2>Heading</h2>
  </div>
  <div class="image">
    <img src="https://images.squarespace-cdn.com/content/v1/56099b28e4b0e9a8dd53c467/1474681761217-VA1F29OQYAQX8IIW1018/ke17ZwdGBToddI8pDm48kFNHtaRIWeOk0XtEG2Iz2ptZw-zPPgdn4jUwVcJE1ZvWhcwhEtWJXoshNdA9f1qD7Xj1nVWs2aaTtWBneO2WM-tqmpERyOMWWNh4XLI3lmIESCawszvU15S2rzqX3HdiIw/image-asset.jpeg?format=300w" />
  </div>
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer venenatis posuere urna et sagittis. In elit elit, venenatis quis leo ut, accumsan lobortis arcu. Donec ut ultricies lorem. Donec id eleifend ipsum. In mi massa, lacinia non facilisis at, vehicula eget purus. Pellentesque dui dolor, scelerisque at ultrices at, fermentum sit amet dui. Mauris posuere gravida ornare. Sed id consectetur lorem. Integer pulvinar mi sed mi dignissim blandit. Vestibulum aliquet ex elit, vitae condimentum nibh faucibus id. Aliquam rhoncus risus non turpis pulvinar, vitae eleifend turpis eleifend. Etiam sed mi eget lorem pharetra imperdiet id ut est. Praesent mollis suscipit velit pharetra posuere. In in accumsan nisl.
  </div>
</div>

.alternating-content-block {
    position: relative;
  }
  .alternating-content-block .text {
    display: inline-block;
    vertical-align: middle;
    width: 66%;
  }
  .alternating-content-block .heading {
    display: inline-block;
    vertical-align: middle;
    width: 66%;
  }
  .alternating-content-block .image {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    width: 33%;
  }

  .alternating-content-block.even .text, 
  .alternating-content-block.even .heading  {
    float: left;

  }
  .alternating-content-block.even .image {
    float: right;
  }

  .alternating-content-block.odd .text, 
  .alternating-content-block.odd .heading  {
    float: right;
  }
  .alternating-content-block.odd .image {
    float: left;
  }

Answer 1

一种可能性是在图像上使用float(根据需要向左或向右)，将它们放在 HTML 代码中的文本之前，并对小屏幕进行媒体查询以更改图像CSS 到 float :无； display: block;将其显示在文本上方自己的 block 中(默认情况下 100% 宽)。