使 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 % 宽度”，从而导致您观察到的重叠行为。

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

Answer 2

需要添加css3属性box-sizing:border-box;这会将您的填充包装到您的 div 中，因此宽度仅为 50%。 如果它对您的问题有帮助，请分享您的反馈。

.col-2{
    float: left;
    width: 50%;
    padding:10px 20px 0px 20px;box-sizing: border-box;
}

Answer 3

你提到 25% 50% 25% 和一个 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;
  box-sizing: border-box;/*added one*/
}

Answer 4

这就是我所需要的（在我进行足够的研究之前我无法弄清楚）： 左右 div 包含图像，我不希望它们在降低屏幕分辨率时改变大小。我想在仅包含文本和订阅表单的中间 div 中输入该调整。 驱使我去那里的问题/答案： How to make element fill remaining width, when sibling has variable width?

我的测试小提琴 - http://jsfiddle.net/0gvxxpjj/

<!-- In html--->
<div class="row">
    <div class="col-1">
        <img src="">
    </div>
        <div class="col-3">
        <img src="">
    </div>
    <div class="col-2">
        <h3>Header</h3>
        <p>This is a paragraph that, along with the header, needs to wrap as the screen is resized</p>
    </div>
</div>
<!-- html ends here-->

/* CSS starts here */

.col-1 {
    float: left;
    width: 100px;
}
.col-3 {
    float: right;
    width: 100px;
}
.col-2{
    padding: 10px 20px 0px 20px;
    overflow: hidden;
}
.row {
    border: 1px solid black;
    display: inline-block;
}
.col-1, .col-3 {
    border: 1px solid blue;
}
.col-2 {
    border: 1px dashed red;
}

希望它对其他人有用。

Answer 5

据我了解，您希望 div 采用 25% - 50% - 25% 的布局，并且在浏览器缩小超过一定大小后，它们变为 100% 宽度并相互堆叠。

这是通过媒体查询完成的。本质上，发生的事情是您在媒体查询中设置了一些 CSS 规则，这些规则仅在满足特定条件（在本例中为浏览器宽度）时才会添加到任何先前的 CSS 规则。下面是一个粗略的例子。

这些是相关部分：

这会设置默认情况下 div 的外观 - 全宽。

.col-1,
.col-2,
.col-3 {
  float: left;
  width: 100%;
}

一旦浏览器宽度大于 768 像素，这会将 div 的宽度设置为 25-50-25。

@media all and (min-width:768px) {
  .col-1, .col-3 {
    width: 25%;
  }
  .col-2 {
    width: 50%;
  }
}

您可以将此示例扩展到您想要的布局。

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

.footer-wfix {
  clear: both;
}

/* for illustrative purposes */

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

@media all and (min-width:768px) {
  .col-1, .col-3 {
    width: 25%;
  }
  .col-2 {
    width: 50%;
  }
}

<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 -->