css - 响应式 Div 不堆叠在移动设备上

Question

我早些时候可以正常工作，但随着我继续编辑，我一定做了什么，现在这两个 div 没有堆叠在移动 View 上。我找到了一个类似的帖子，但提供的示例网站不再有效，所以如果没有上下文，答案就没有多大帮助。

我尝试调整 float ，但似乎无法获得我需要的结果，而且我不认为它是那样的，因为它是以前工作的。有人知道我可以调整什么来解决这个问题吗？

.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

您在移动 View 上定义了超过 100% 的宽度。最简单的解决方法是应用:

* {
    box-sizing: border-box;
}

... 对您上面提到的所有选择器或仅对选择器。另一种方法是以百分比设置边距 + 填充，所有这些都与元素宽度(也是边框)相加。你应该阅读 this interesting article关于 box-sizing 属性。