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 に答える