Div 元素在响应中重叠

Question

我是 HTML 和 CSS 方面的新手，并且已经为此工作了几个月。我想要一个 div 元素，其中包含页面左上角的表格。在它旁边，我想要一个图像，然后是该图像下方的文本，然后环绕左侧的桌子。

我能够做到这一点，并认为一切都很好，但后来我发现在移动设备中查看时，图像和文本与表格重叠，我不知道如何纠正它。您可以在

上看到我所说的示例

https://www.reviewsfromthecouch.com/2019/11/dr-phibes-rises-again-film-review/

这是我一直在处理这个问题的所有代码。

.wrapper {
  float: left;
  clear: right;
  display: table;
  table-layout: fixed;
}

.img-responsive {
  display: table-cell;
  width: 100%;
}

.col-md-6 {
  width: 30%;
  float: left;
}

.col-md-3 {
  width: 70%;
  float: right;
}

<div class="col-md-6">
  <table style="height: 508px; width: 100%; border-collapse: collapse; border-color: #d90e00; border-style: solid;">
    <tbody>
      <tr style="height: 225px;">
        <td style="background-color: #d90e00; height: 225px; width: 100%; border-top: none; border-bottom: none;"><img class="size-full wp-image-3281 aligncenter" src=”[IMAGE]” alt="[IMAGE-TITLE]" width="150" height="225" /></td>
      </tr>
      <tr style="height: 24px;">
        <td style="background-color: #d90e00; height: 24px; width: 100%; padding-right: 10px; padding-left: 10px; border-top: none; border-bottom: none;"><strong><span style="font-size: 10pt; display: block;"> TEXT </span></strong></td>
      </tr>
      <tr style="height: 24px;">
        <td style="height: 24px; width: 100%; padding-right: 10px; padding-left: 10px; border-top: none; border-bottom: none;"><span style="font-size: 10pt;"> TEXT </span></td>
      </tr>
      <tr style="height: 24px;">
        <td style="background-color: #d90e00; height: 24px; width: 100%; padding-right: 10px; padding-left: 10px; border-top: none; border-bottom: none;"><strong><span style="font-size: 10pt; display: block;"> TEXT </span></strong></td>
      </tr>
      <tr style="height: 24px;">
        <td style="height: 24px; width: 100%; padding-right: 10px; padding-left: 10px; border-top: none; border-bottom: none;"><span style="font-size: 10pt;"> TEXT </span></td>
      </tr>
      <tr style="height: 24px;">
        <td style="background-color: #d90e00; height: 24px; width: 100%; padding-right: 10px; padding-left: 10px; border-top: none; border-bottom: none;"><strong><span style="font-size: 10pt; display: block;"> TEXT </span></strong></td>
      </tr>
      <tr style="height: 24px;">
        <td style="height: 24px; width: 100%; padding-right: 10px; padding-left: 10px; border-top: none; border-bottom: none;"><span style="font-size: 10pt;"> TEXT </span></td>
      </tr>
      <tr style="height: 19px;">
        <td style="background-color: #d90e00; height: 24px; width: 100%; padding-right: 10px; padding-left: 10px; border-top: none; border-bottom: none;"><strong><span style="font-size: 10pt; display: block;"> TEXT </span></strong></td>
      </tr>
      <tr style="height: 24px;">
        <td style="width: 100%; padding-right: 10px; padding-left: 10px; border-top: none; border-bottom: none; height: 24px;"><span style="font-size: 10pt;"> TEXT </span></td>
      </tr>
      <tr style="height: 24px;">
        <td style="background-color: #d90e00; height: 24px; width: 100%; padding-right: 10px; padding-left: 10px; border-top: none; border-bottom: none;"><strong><span style="font-size: 10pt; display: block;"> TEXT </span></strong></td>
      </tr>
      <tr style="height: 24px;">
        <td style="height: 24px; width: 100%; padding-right: 10px; padding-left: 10px; border-top: none; border-bottom: none;"><span style="font-size: 10pt;"> TEXT </span></td>
      </tr>
      <tr style="height: 24px;">
        <td style="background-color: #d90e00; height: 24px; width: 100%; padding-right: 10px; padding-left: 10px; border-top: none; border-bottom: none;"><strong><span style="font-size: 10pt; display: block;"> TEXT </span></strong></td>
      </tr>
      <tr style="height: 24px;">
        <td style="height: 24px; width: 100%; padding-right: 10px; padding-left: 10px; border-top: none; border-bottom: none;"><span style="font-size: 10pt;"> TEXT </span></td>
      </tr>
    </tbody>
  </table>
</div>
<div class="col-md-3">
  <h4><img class="img-responsive wp-image-3279" src=”[IMAGE]” alt="[IMAGE-TITLE]" width="100%" height="470" />
    <img class="alignnone wp-image-1912" src=”[IMAGE]” alt="[IMAGE-TITLE]" width="100" height="56" />
    <br><strong><i> TEXT </i></strong><br></h4>
</div>
TEXT

Answer 1

由于您已经根据% 百分比为所有元素设置了样式，因此每个元素都将在% 百分比中获得那么多屏幕，即使宽度发生变化以克服这个问题，您必须使用 媒体查询，您可以通过这些查询根据屏幕大小的变化设置元素样式，并使网站变得响应。

更多媒体查询详情Click Here