简单的响应与两个盒子？

我下面举个例子：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; 
}

的问题在于，盒没有调整，直到第二箱FALS下来一排？我需要的是盒子总是调整大小，永远不会掉下来。

这怎么办？

来源

2012-12-22 Ivy

为什么不使用Twitter Bootstrap？这对响应式设计非常有用。它有类容器流体，排液，spanxx，这将解决您的问题。

来源

2012-12-22 10:23:00 asgoth

我以前听说过这个recomendation，是有什么缺点我应该知道自举vs手动响应（css）？ – Ivy

如果我为px大小的桌面构建我的站点，稍后可能会应用bootstrap以使页面响应？ – Ivy

是的，你可以，但为此，你必须根据引导框架将更改应用到页面，以使其响应。 – pkachhia

只使用百分比，它会变成响应。

这里是响应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; 
}

来源

2012-12-22 10:24:38 Codler

2 + 45 + 45 + 1 + 1 = 94％其中是7％？如果我将宽度设置为48％，那么我们总共可以获得100％的第二个div将连续跳跃？ – Ivy

它是，1（填充）+45（宽度）+1（填充）+2（余量）+1（填充）+45（宽度）+1（填充）= 96％ – Codler

为什么不使它成为100％？ – Ivy

简单的响应与两个盒子？

回答

相关问题