html - CSS堆栈多个全宽div

Question

我有这个标记:

<div id="wrapper">
  <div id="container">
    <div class="block"></div>
    <div class="block"></div>
  </div>
</div>

和这个 CSS:

#wrapper {
  width: 100%;
  overflow: hidden;
}

#container {
  width: 200%;
}

.block {
  width: 50%;
  float: left;
}

基本上我想做的就是让 2 个全宽 div 彼此相邻 float ，但是当我在其中放入一些内容时，我会以容器为中心并显示两个 div 的片段，如下所示:http://prntscr.com/8lr4l6

我做错了什么？

Answer 1

不需要设置包装器和容器的宽度。如果没有其他设置，它总是 100%。只需将每个 block 的宽度设置为 50% 并将它们向左浮动即可。

#wrapper {
    overflow: hidden;
}

.block {
    float: left;
    width: 50%;
}

Example