html - Divs 没有在窗口调整大小时移动

Question

我想div在窗口调整大小时移动。我div在一个里面有三个div（即容器）

例如：

      <div id="container">
          <div class="left"></div>
          <div class="middle"></div>
          <div class="right"></div>
        </div>

它正确对齐。但是当我调整窗口大小时，我希望这些div's 移动（但它不应该重叠，我的意思是它应该在重叠之前停止）。

This is how my CSS looks.
#container {
    text-align:center;
    width : 100%;
}

.left {
    float:left;
}

.center {
    display: inline-block;
    margin:0 auto;
}

.right {
    float:right;
}

谢谢您的帮助！

块引用

Answer 1

你可以在这个 twitter 引导程序上简单地创建你喜欢的 div 和 css 设计，这个服务可以自动创建响应式布局。

推特引导

Answer 2

你的 CSS 不对。而不是使用#left, #center, #right, 你需要使用.left, .center,.right

当您使用#它时，它将选择具有该 id 的 html 元素，这就是为什么您的 css 只是选择<div id="container">，在您的其他 div 中您正在使用类，所以您使用.

看一个例子：http: //jsfiddle.net/rELXZ/

有关 CSS 选择器的更多信息，您可以在这里找到http://www.w3schools.com/cssref/css_selectors.asp