css - 为什么 div 不排成一行，如何让它们排成一行？

Question

我尝试为 3 个相同大小的 div 制作我自己的网格系统，目的是让它们在 1024 像素屏幕/设备宽度甚至更低宽度的同一行中。然而出于某种原因，div 在 1024 像素时不同步，但在更高的宽度下很好，尽管它们本身总共没有占用 1024 像素，我也在我的代码中使用 Bootstrap (下面的代码)-

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

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

Answer 1

基本上您需要做的是使用 css 属性“float”和“clear”。

看看这个 JSFiddle在这里。

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

div {
    float:left;
    clear:left;
}

希望这对您有所帮助!