html - 使 3 列 div 响应。帮我找出我做错了什么？

Question

行内的 div 元素向左浮动，如下所述: http://www.w3schools.com/html/html_responsive.asp和百分比大小。我试图在类似的问题中应用下面这个链接中的建议，但没有成功: Responsive CSS / Inline divs

div 保持 50% - 100% - 50% 的内联关系，并且它们的内容重叠。谁能帮我发现我错过了什么？谢谢。

在我的 CSS 和 HTML 中我有:

footer[role="contentinfo"] div {
box-sizing: border-box;
}
.engage-row:after {
  content: "";
  display: table;
  clear: both;
}
.col-1 {
  float: left;
  width: 25%;
}
.col-2 {
  float: left;
  width: 50%;
  padding: 10px 20px 0px 20px;
}
.col-3 {
  float: left;
  width: 25%;
}
.footer-wfix {
  clear: both;
}

/* for illustrative purposes */

.engage-row {
  border: 1px solid red;
}
.engage-row > div {
  border: 1px solid blue;
}

<footer id="colophon" role="contentinfo">
<div class="footer-wrap">
  <div class="engage-row">
    <div class="col-1">
      Column 1
    </div>
    <div class="col-2">
      Column 2
    </div>
    <div class="col-3">
      Column 3
    </div>
  </div>
  <div class="footer-wfix">
      Footer Menu and Site-generator
  </div>
</div>
</footer><!-- #colophon -->

为了清晰起见，编辑了代码并添加了以下内容: - 我通过添加“参与行”来编辑页脚，它包含列 div。 - 所有的div都继承了box-sizing: border-box。 - 当我减小屏幕尺寸(宽度)时，第 1 列、第 2 列和第 3 列不会重新调整位置；它们不是彼此重叠，而是改变它们的大小(保持百分比但变小)，使包含的文本和图像重叠(第 2 列中的文本在第 1 列中的图像前面)。为了清楚起见，我希望我使用的是正确的术语。 - 我怎样才能让他们随着屏幕尺寸的变化重新调整定位？ - 打印屏幕:3column divs in footer

(这是一个很棒的网站。谢谢)

Answer 1

您需要考虑 .col-2 声明中的填充。当您将三列加起来总计“100% 宽度”然后添加填充时，结果可以说是“超过 100% 宽度”，导致您观察到重叠行为。

解决它的一种方法是也以百分比声明填充。如果您不喜欢由此产生的“flex 边距”，则需要找出一个可行的方程式。或查看 Bootstrap或类似的东西(我的意思是你可以按原样使用它，或者破译他们的响应解决方案)。