0

我尝试为 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%;
}

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

4

1 回答 1

0

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

在这里查看这个JSFiddle。

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

div {
    float:left;
    clear:left;
}

希望这可以帮助！

于 2013-02-04T03:45:07.580 回答