表示背景フォームインライン

Question

、私はこれを試してみてください。

 <div id="items"> 
     <div id="item_bg"></div> 
     <div id="item_bg"></div> 
     <div id="item_bg"></div> 
     </div> 

     #items { 
     display: block; 
     width: 700px; 
     } 
     #item_bg { 
     background: black; 
     border-radius: 7px; 
     height: 128px; 
     width: 128px; 
     } 

は、今では次のようになります。https://jsfiddle.net/vmz76s1z/ しかし、私は、行のそのショーが

Answer 1

たい子要素にfloat:leftまたはdisplay: inline-blockのいずれかを追加します。 ID はが一意である必要がありますので、#item_bgをクラスに変更してください。

jsFiddle example

Answer 2

最初のIDは、HTMLページ内で一意である必要があります。

だから、最初のあなたはclass="item_bg" にid="item_bg"を変更する必要がその後、次の2つのソリューションを持っている：あなたがしたい場合

第二

.item_bg { 
      background: black; 
      display:inline-block; 
      border-radius: 7px; 
      height: 128px; 
      width: 128px; 
      } 

：

まずあなたが継承位置決めに滞在したい場合は、あなたが行うことができますが相対フローティングアイテムを選択し、整列する側を選択します。

.item_bg { 
      background: black; 
      float:left; 
      border-radius: 7px; 
      height: 128px; 
      width: 128px; 
      }