Question

我尝试为3个大小相同的div制作我自己的网格系统，目标是将它们保持在1024px屏幕/设备宽度的同一行，甚至可以在较低宽度处。出于某种原因，但是在1024像素的情况下，div会失去同步但在宽度较高的情况下很好，尽管自己总共不占用1024px，我也在使用我的代码的自举（代码如下） -

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 {
    float:left;
    clear:left;
}

希望这有帮助！

为什么div没有排好并且如何让他们去？

1 个答案: