0

Jquery 、jsFiddleで作成された div の行があります

生成されたhtmlは

<div id="thisPage">
  <div id="vehicles" class="wrapper">
    <div class="divd spacer">&nbsp;</div> 
    <div id="Paul " title="Driver Details" class="divd i100">i1001<br>Paul </div>
    <div id="Simon " title="Driver Details" class="divd i100">i1002<br>Simon </div>
    <div id="Phil " title="Driver Details" class="divd i100">i1003<br>Phil </div>
    <div id="Lee " title="Driver Details" class="divd i100">i1004<br>Lee </div>
    <div id="Martin" title="Driver Details" class="divd i100">i1005<br>Martin </div>
    <div id="" title="Driver Details" class="divd i100">i1006<br></div>
    <div id="Tom Robson" title="Driver Details" class="divd i60">i601<br>Tom Robson</div>
    <div id="Alan Linney " title="Driver Details" class="divd i60">i602<br>Alan Linney </div>
  </div>

  <div id="vehicles" class="wrapper" style="top:60px">
    <div id="2013-03-11" class="divd dateWeekday">Monday 11<br>March</div>
    <div id="Paul " title="Driver Details" class="divd i100"> JOB D </div>
    <div id="Simon " title="Driver Details" class="divd i100"> JOB D </div>
    <div id="Phil " title="Driver Details" class="divd i100"> JOB D </div>
    <div id="Lee " title="Driver Details" class="divd i100"> JOB D </div>
    <div id="Martin " title="Driver Details" class="divd i100"> JOB D </div>
    <div id="" title="Driver Details" class="divd i100"> JOB D </div>
    <div id="Tom " title="Driver Details" class="divd i60"> JOB D </div>
  </div>
</div>

スタイリングは

.wrapper {
    position:absolute; vertical-align:middle ; 
}
.divd { 
    display: inline-block;
    margin:2px 2px 2px 2px ;
    width: 50px;
    height: 50px;   
    border: 1px solid black;
    background-color:#999; 
    border-radius:5px;  
    z-index:200;
    text-align:center;
    vertical-align:bottom ;
}
.dateWeekday {
        width: 120px;
        background-color:#9CF ;
        margin:2px 2px 2px 2px ;
    }
.spacer {
        width: 120px;
        margin:2px 2px 2px 2px ;
    }

すべて正常に動作しますが、ブラウザーの結果には、下の図の赤い線で示されているように、最初の行に対する 2 行目のオフセットが表示されます。これを修正するにはどうすればよいですか? 何か助けてください？

スクリーングラブ

4

5 に答える 5

1

これを試して：

.wrapper {
    position:absolute; vertical-align:middle ; 
}
.divd { 
background-color: #999999;
    border: 1px solid black;
    border-radius: 5px 5px 5px 5px;
    display: inline-block;
    float: left;
    height: 50px;
    margin: 0 1px 0 0;
    text-align: center;
    vertical-align: bottom;
    width: 50px;
    z-index: 200;
}
.dateWeekday {
        width: 120px;
        background-color:#9CF ;
    }
.spacer {
        width: 120px;
    }

これで、すべての divd に 1px の右側の余白ができました。

margin-right:1px; /* is the same as margin:0 1px 0 0; */

マージンは次のように機能します。

margin:topPX rightPX bottomtPX leftPX; /* if four */

また：

    margin:top&bottomPX right&leftPX; /*if only two */

マージン:2px 2px 2px 2px ; 以下と同じです:

 margin:2px; /* if just one its the same top+right+bottom+left */
于 2013-03-11T21:11:27.403 に答える
0

divの行を操作している場合は、divの行ごとにラッパーを用意する必要があります。これは、デザインを変更する必要がある場合に非常に役立ちます。

于 2013-03-11T21:08:26.450 に答える
0 
.wrapper
 {
vertical-align:middle ;
float:left; 
}
于 2013-03-11T21:21:44.223 に答える
0

試す：

.wrapper div {
   float: left;
}
于 2013-03-11T21:06:52.333 に答える
0

私は知っています、これは答えではありません、私は写真を投稿する必要がありました.

この PC から見たものを次に示します。

ここに画像の説明を入力

おそらく、対象となる特定のブラウザー、完全な htmlコード (doctype、BOM マーク、文字エンコーディングなどを確認するため) など、状況に関する詳細情報を提供できます。

于 2013-03-11T21:50:20.943 に答える