divに問題がありますか？

Question

私はCSSに慣れていなくても、HTMLにはほとんど触れていないので、まだどちらもうんざりしています。私は練習サイトを構築しており、ここで間違っていることを理解できません。私の目標は、ヘッダーとパラグラフの左側にイメージボックスを置くことですが、イメージの上部と同じ行にタイトルを付けることです。ここで私が持っているものです。

このCSSと組み合わせる

<img src="" /> 
 
<div class="bios"> 
 
    <h4>First Last</h4> 
 
    <p>This is my bio</p> 
 
</div>

：

 .bios { 
      height: 100px; 
      width: auto; 
      display: inline; 
      background-color: #a78ffc; 
      clear: left; 
      display: inline; 
      /** top, right, bottom, left **/ 
      margin: 1px 1px 1px 10px; 
      /** top, right, bottom, left **/ 
      padding: 1px 1px 1px 10px 
     } 

     img { 
      height: 100px; 
      width: 100px; 
      float: left; 
      clear: left; 
      display: inline; 
     } 

私は本当にプレビューで何が起こっているのか確認するために背景色を追加し、私はより多くのよこれまで以上に混乱しています。要求されたと私はディスプレイを追加したよう わかりましたが、私は追加のコードを追加しました

http://i1126.photobucket.com/albums/l618/spenciecakes/Screen%20Shot%202016-05-13%20at%2010.41.45%20AM_zps50dajzko.png

EDIT：これは、それが表示されますどのようにインラインの両方の要素に正直なところ、それはすべて同じように表示されます。 。

Answer 1

display: inline-blockを使用できます。

.inline { 
 
    display: inline-block; 
 
} 
 

 
.title { 
 
    font-weight: bold; 
 
}

<div> 
 
    <div class="inline"> 
 
    <img src="http://placehold.it/50x50" /> 
 
    </div> 
 
    <div class="inline"> 
 
    <div class="title">Item 1</div> 
 
    <p>Item 1 description</p> 
 
    </div> 
 
</div> 
 

 
<div> 
 
    <div class="inline"> 
 
    <img src="http://placehold.it/50x50" /> 
 
    </div> 
 
    <div class="inline"> 
 
    <div class="title">Item 2</div> 
 
    <p>Item 2 description</p> 
 
    </div> 
 
</div>

Answer 2

あなたが提供したコード（画像のコードは何ですか？）だけでは解決できませんが、現在のコードの何が問題なのかを教えてくれます。まず、widthとheightプロパティを動作させるには、displayプロパティをinline-blockまたはblockのいずれかに設定する必要があります。

第2に、floatプロパティはではありません。の値はcenterです。 leftとrightの値を取ることができます（この場合、最初の値が必要です）。

Answer 3

負のマージントリックが魅力（コードのコメントで説明）

.bio { 
 
    overflow: hidden; /* Prevent negative margin from leaking out */ 
 
} 
 

 
.bio-inner { 
 
    overflow: hidden; /* Clearfix */ 
 
    margin-left: -1em; /* A) Remove spacing between items when they are against the left side (Must be negative B) */ 
 
} 
 

 
.bio-thumbnail { 
 
    height: 3em; 
 
    width: auto; 
 
    background-color: #a78ffc; 
 
} 
 

 
.bio-thumbnail, 
 
.bio-info { 
 
    float: left; 
 
    margin-left: 1em; /* B) Add spacing between items (Must be positive A) */ 
 
} 
 

 
.bio-info-heading { 
 
    margin: 0em; /* Just removing default margins */ 
 
} 
 

 
.bio-info-text { 
 
    margin-top: 0.5em; 
 
}

<div class="bio"> 
 
    <div class="bio-inner"> 
 
    <img class="bio-thumbnail" src="http://i.stack.imgur.com/7bI1Y.jpg"> 
 
    <div class="bio-info"> 
 
     <h4 class="bio-info-heading">First Last</h4> 
 
     <p class="bio-info-text">This is my bio</p> 
 
    </div> 
 
    </div> 
 
</div>

このように動作します、私が発見した、場合によっては最高の作品画面が小さすぎて画像とテキストを横に並べることができない場合があります。