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

​