防止使用流体布局包装DIV

我在收缩浏览器窗口时无法阻止DIV包装到下一行。我一定有一些小而简单的东西，但我现在已经呆了一段时间了，我无法弄清楚。它似乎只推倒“博客”div，但不是“信息”股利。有什么建议么？防止使用流体布局包装DIV

下面是一个例子： http://www.spynsycle.com/portfolio/

CSS：

/* Level 1 */ 
#container { 
    min-width: 800px; 
    width: 100%; 
    min-height: 768px; 
    height: 100%; 
    background-color: lightgrey; 
} 

/* Level 2 */ 
#portfolio { 
    min-width: 396px; 
    width: 40%; 
    min-height: 768px; 
    height: 100%; 
    float: left; 
    background-color:lightgreen; 

} 
#information { 
    min-width: 108px; 
    width: 20%; 
    min-height: 768px; 
    height: 100%; 
    float: left; 
    background-color: lightcoral; 
} 
#blog { 
    min-width: 396px; 
    width: 40%; 
    min-height: 768px; 
    height: 100%; 
    float: left; 
    background-color: lightblue; 
}

HTML：

<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <title>Portfolio</title> 
     <link rel="stylesheet" href="css/index.css" type="text/css" /> 
    </head> 
    <body> 
     <div id="container"> 
      <div id="portfolio"> 
       Port  
      </div> 
      <div id="information"> 
       Info 
      </div> 
      <div id="blog"> 
       Blog 
      </div> 
     </div> 
    </body> 
</html>

来源

2012-06-05 mb595x

因为你在像素分配min-width，作为你的网页获得更小，最终你会跑出来f足够的像素来保持宽度的总和，并且您的浏览器正在强制您的博客div进行换行。您的宽度总计为900px，因此一旦浏览器窗口降至900px以下，您将开始看到包装。

发生了什么最终你的min-width的396px变得大于浏览器宽度的40%。

来源

2012-06-05 00:47:48

我实际上有两个较宽的div和300的中间一个最初，它做了800像素（我的最小宽度的容器），但自然我的基本数学技能失败了我，我认为300是40％ 800和200是800的20％。但是，它实际上应该是320和160.我知道这很简单，谢谢！ – mb595x

是的，我无法计算我失去跟踪宽度数学的次数，尤其是一旦填充和余量开始卷入其中。 –

防止使用流体布局包装DIV

回答

相关问题