Question

我之前有正确的工作，但是当我继续编辑时，我必须做一些事情，现在两个div不会叠加在移动视图上。我发现了一个类似的帖子，但提供的示例站点不再有效，所以如果没有上下文，答案就没有用。

我尝试调整花车，但似乎无法得到我需要的结果，而且我不认为那是因为之前正在工作。我有什么想法可以调整以解决这个问题吗？

.eventcontainer {
  bottom: 0;
  margin: .5%;
  width: 95%;
}
.eventleft {
  display: block;
  float: left;
  width: 70%;
  max-width: 700px;
}
.eventright {
  display: block;
  float: right;
  width: 20%;
  text-align: left;
  border: 2px solid #9cc;
  padding: 2%;
}
@media screen and (max-width: 900px) {
  .eventcontainer {
    bottom: 0;
    margin: .5%;
    width: 100%;
  }
  .eventleft {
    display: block;
    float: left;
    width: 80%;
    max-width: 575px;
  }
  .eventright {
    display: block;
    float: right;
    width: 20%;
    text-align: left;
  }
}
@media screen and (max-width: 600px) {
  .eventcontainer {
    max-width: 95%;
    margin: 0 auto;
  }
  .leftcontent {
    float: none;
    text-align: center;
  }
  .rightcontent {
    float: none;
    text-align: left;
  }
}

<div class="eventcontainer">
  <div class="eventleft">
    <h2 class="activities">Student Activities</h2>
    <p class="activities">CMS students participate ... blah blah</p>
    <h2 class="activities">Social Media Awareness</h2>
    <p class="activities">This week some of the students and staff ... yada yada</p>
    <p class="activities">In light of this week’s incidents ... yak yak</p>
  </div>
  <div class="eventright">
    <h2>Events</h2>
    <h3>Parent Teacher Conferences</h3>
    <h4>Thurs, Nov 20, 2014</h4>
    <h5>2:00pm - 7:00pm</h5>
    <p>The quarterly Parent Teacher Conferences will be held on the Thursday before Thanksgiving break. Come meet your child's teachers and stop by the auditorium for the student art exhibit!</p>
    <h3>Thanksgiving Break</h3>
    <h4>Nov 24 - Nov 28, 2014</h4>
    <p>No school the week of Thanksgiving!</p>
  </div>
</div>
</div>

活动类只是文本本身的样式，与问题无关。

Answer 1

您在移动视图上定义了超过100％的宽度。最简单的解决方法是申请：

* {
    box-sizing: border-box;
}

...对所有人或仅对上面提到的选择者。另一种方法是设置百分比的边距+填充，所有这些都与元素宽度（也是边框）相加。您应该阅读有关盒子大小调整属性的this interesting article。

响应式Div不在手机上堆叠

1 个答案: