Div元素在响应中重叠

Question

我是HTML和CSS的新手，已经从事了几个月的研究。我想要一个div元素，该元素在页面的左上方包含一个表。在它旁边，我想要一个图像，然后是该图像下方的文本，然后环绕在左侧的表格周围。

我能够做到这一点，并认为一切都很好，但是后来我发现，在移动设备上查看时，图像和文本与表格重叠在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

由于您已按照%百分比为所有元素设置了CSS样式，因此即使宽度改变以克服此问题，每个元素也都将以%百分比获得那么多的屏幕，您必须使用媒体查询，您可以根据屏幕大小的变化来对元素进行样式设置，从而使网站具有响应能力。

有关媒体查询Click Here的更多详细信息