Div 元素在响应中重叠

Question

我是 HTML 和 CSS 的新手，几个月来一直在努力。我想要一个 div 元素，其中包含页面左上角的 table。在它旁边，我想要一个图像，然后是该图像下方的文本，然后环绕在左侧的 table 周围。

我能够做到这一点并认为一切都很好，但后来我发现在移动设备上查看时，图像和文本将 div 与 table 重叠，我无法弄清楚如何纠正它。你可以在

看到我所说的例子

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 样式，即使宽度要克服这个问题，您必须使用 Media Queries，通过它您可以根据不断变化的屏幕大小设置元素样式，网站变得响应迅速。

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

Div 元素在响应中重叠

Div Elements Overlapping In Responsive

html

css

blogs

image