简单快速响应两个盒子？

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;
}

Answer 2

为什么不使用Twitter Bootstrap？它非常适合响应式设计。它有容器流体，行液，spanxx等类，可以解决您的问题。