0

2行目の上部が窮屈にならないようにサンプルコードを設定しようとしています。これらを 2 行に分割することはできないため、各 div の上部にある種のパディングを追加して、少し息抜きスペースを確保する方法が必要です。

以下は私が試したコードで、jsfiddleも追加しました

HTML:

<div class="container">
     <div class="item red">TEXT</div>
     <div class="item red">TEXT</div>
     <div class="item red">TEXT</div>
     <div class="item red">TEXT</div>
     <div class="item red">TEXT</div>
     <div class="item red">TEXT</div>
     <div class="item red">TEXT</div>
     <div class="item red">TEXT</div>
     <div class="item red">TEXT</div>
     <div class="item red">TEXT</div>
     <div class="item red">TEXT</div>
     <div class="item red">TEXT</div>
     <div class="item red">TEXT</div>
     <div class="item red">TEXT</div>
     <div class="item red">TEXT</div>
</div>

CSS:

 .container{
     width:500px;
 }
 .item{
     width:90px; 
     height:20px;
     display:inline;
     margin-right:10px;
     padding-top:15px;
 }
 .red{
     background-color:#B222222;
 }
4

3 に答える 3

4

他の多くの CSS プロパティの中でも、Margin は、 を持つオブジェクトでは機能しませんdisplay: inline。

inline-block代わりに、またはdisplay: block一緒に 使用してくださいfloat: left。

于 2013-05-15T16:57:28.560 に答える
2

sで使用display:inline-block;し.item divます。

デモ

 .item{
     width:90px; 
     height:20px;
     display:inline-block;
     margin-right:10px;
     margin-top:15px;
 }

マージンは非ブロック要素では機能しません。

于 2013-05-15T16:20:09.137 に答える
0

スペースを確保するためline-heightにを追加できるはずです。例:.container div

.container {
  width:500px;
  line-height:2;
}

値「2」を必要に応じて変更します。

フォークフィドル。

于 2013-05-15T16:24:15.263 に答える