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相互浮动，但是当我在其中放入一些内容时，我将容器置于中心，并显示两个div的部分，如下所示：http://prntscr.com/8lr4l6

我做错了什么？

Answer 1

不需要来设置包装器和容器的宽度。如果没有设置其他内容，则始终为100％。只需为每个块设置50％的宽度并将它们向左浮动。

#wrapper {
    overflow: hidden;
}

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

Example

Answer 2

这样的事情对你有用：http://jsfiddle.net/swm53ran/338/

您可以通过评论overflow: hidden

来查看div

<div class="container">
    <div class="block block1">
        This is content for div 1 This is content for div 1 This is content for div 1
    </div>
    <div class="block block2">
        This is content for div 2 This is content for div 2 This is content for div 2
    </div>
</div>


body {
    overflow: hidden;
}
.container {
    width: 200%;
    padding: 0px;
}
.block {
    display: inline-block;
    width: 50%;
    float: left;
    outline: 1px solid gray;
}

Answer 3

男孩，我是个笨蛋！？在我的情况下，答案很简单。我在输入屏幕div上留下了autofocus属性，当然它会自动滚动到该div。

感谢大家的回答。：）

CSS堆栈多个全宽div

3 个答案: