html - 用两个盒子简单响应？

Question

我有以下示例：http: //jsfiddle.net/dwDZx/10/

html

<div id="container">
    <div id="div1" class="regularContainer">
        <div>one</div>
    </div>
    <div id="div2" class="regularContainer">
        <div>two</div>
    </div>
</div>​ 

css

* {
  margin:0;
  padding:0;
}

#div1 {
  float:left;
  margin-right:2%;
  margin-bottom:10px;
  max-width:300px;
  width:47%;
  background-color:#d3edff;
  border-color:#00b5ff;
  padding-bottom:8px;
}

#div2 {
  float:left;
  max-width:300px;
  width:47%;
}

.regularContainer {
  float:left;
  padding:7px;
  background-color:#fff;
  border:1px solid #00b5ff;
  width:784px;
}

​ 问题是直到第二个盒子连续下降后盒子才调整大小？我需要的是始终调整大小并且永远不会掉下来的盒子。

如何才能做到这一点？

Answer 1

仅使用百分比，它将变得响应。

这是响应式 http://jsfiddle.net/dwDZx/11/

我将宽度更改为 45% 并将填充更改为之前的 1%

* { margin: 0; padding: 0; }

#div1
{
    float:              left;
    margin-right:       2%;         
    margin-bottom:      10px;
    max-width:          300px;
    width:              45%;
    background-color:   #d3edff;
    border-color:       #00b5ff;
    padding-bottom:     8px;
}

#div2
{
    float:              left;
    max-width:          300px;
    width:              45%; 
}

.regularContainer
{
    float:                      left;
    padding:                    1%;
    background-color:           #ffffff;
    border:                     1px solid #00b5ff;
    width:                      784px;
}

​</p>

Answer 2

你为什么不直接使用 Twitter Bootstrap？它非常适合响应式设计。它有 container-fluid、row-fluid、spanxx 等类，可以解决您的问题。