Question

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

div的内联关系为50％ - 100％ - 50％且内容重叠。任何人都可以帮我发现我错过的东西吗？谢谢。

在我的CSS和HTML中，我有：

＆＃13;

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

＆＃13;

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

＆＃13;

编辑代码并添加以下内容以澄清： - 我通过添加＆＃34;参与行＆＃34;来编辑页脚。并且它包含列div。 - 所有div都继承了box-sizing：border-box。 - 当我减小屏幕尺寸（宽度）时，第1列，第2列和第3列不会重新调整位置;它们不是变得彼此重叠，而是改变它们的大小（保持百分比但变小），使包含的文本和图像重叠（第2列的文本在第1列的图像前面）。我希望我使用正确的术语以保持清晰。 - 当屏幕尺寸发生变化时，如何让它们重新调整定位？ - PrintScreen：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％的宽度并叠加在一起。< / p>

这是通过媒体查询完成的。实际上，在媒体查询中设置一些CSS规则，只有在满足某个条件时才会添加到任何以前的CSS规则（在这种情况下是浏览器宽度）。下面是一个粗略的例子。

以下是相关部分：

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

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

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

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

您可以将此示例扩展到所需的布局。

＆＃13;

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%;
  }
}

＆＃13;

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

＆＃13;

使3列div响应。帮我看看我做错了什么？

5 个答案: