为什么 div 不排成一行以及如何让他们排成一行？答案

【问题标题】：Why are div's not staying in row and how to get them to?为什么 div 不排成一行以及如何让他们排成一行？
【发布时间】：2013-01-18 18:06:38
【问题描述】：

我尝试为 3 个大小相同的 div 制作自己的网格系统，目标是让它们以 1024 像素的屏幕/设备宽度保持在同一行中，甚至可能以更低的宽度保持在同一行中。但是由于某种原因，在 1024 像素时，div 不同步，但在更高的宽度下很好，尽管它们本身不占用 1024 像素，我也在使用引导程序和我的代码（下面的代码）-

html

<div clss="row-fluid">
<div id="box" class="span12">

  <div class="grid">

    <div class="b b1">

      <div class="module">
        <h2>
        IMPORTANT TITLE GOES HERE
        </h2> 
      </div>  

    </div>  

    <div class="b b2">

        <div class="module">
        <h2>
        IMPORTANT TITLE GOES HERE
        </h2> 
      </div>

    </div>  

    <div class="b b3">

       <div class="module">
        <h2>
        IMPORTANT TITLE GOES HERE
        </h2> 
      </div>

    </div>  

  </div>    

</div>
</div>

CSS -

*, {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}



#box{
  max-width: 1024px;
  min-width: 250px;
  margin: 30px auto;
  background: #111;
}

.grid {
  overflow: hidden;
}
.grid .b{
  float: left;
}

.grid .b1 {
  max-width: 341px;
  min-width: 250px;
  height: 200px;
  background: blue;
}
.grid .b2 {
  max-width: 341px;
  min-width: 250px;
  height: 200px;
  background: red;
}
.grid .b3 {
  max-width: 341px;
  min-width: 250px;
  height: 200px;
  background: green;
}

.module {
  padding-top: 20%;
}

那么我哪里出错了，我该如何解决呢？

【问题讨论】：

我还应该补充一点，当我将最大宽度从 341 减小到 340 时，它们适合

标签： css layout twitter-bootstrap grid fluid-layout

【解决方案1】：

基本上你需要做的是使用css属性'float'和'clear'。

在这里查看JSFiddle。

对于这个例子，我只是针对所有 div，如下所示，但显然你会改变它来定位你需要的单个 div，而不是页面上的所有 div。

div {
    float:left;
    clear:left;
}

希望这会有所帮助！

【讨论】：