divを使用してコンテンツのコンテナを作成する

Question

私は小さなページを作成していますが、divコンテンツラッパーがあり、その中に実際のコンテンツを含むdivがいくつかあります。何らかの理由で私のdivは私がテキストを保持しないように保持していません。最終的に私は写真とテキストの間に少しのスペースを追加しようとしています。テキストの最初の行がイメージからどのように離れているかに注目してください。残りの部分はそれに隣接しています。ここでは、コードは次のようになります。

#content_wrap { 
 
    width: 700px; 
 
    margin: 0px; 
 
    padding: 50px 0px 0px; 
 
} 
 
#content_photo { 
 
    vertical-align: top; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    display: inline; 
 
    position: relative; 
 
} 
 
#content_desc { 
 
    vertical-align: top; 
 
    margin: 0px; 
 
    padding: 0px 0px 0px 100px; 
 
    display: inline; 
 
    position: relative; 
 
} 
 
#aphoto { 
 
    width: 150px; 
 
    height: auto; 
 
}

<div id="content_wrap"> 
 
    <div id="content_photo"> 
 
    <img id="aphoto" src="//placehold.it/100?text=Image" align="left"> 
 
    </div> 
 
    <div id="content_desc">A whole bunch of random text. A whole bunch of random text. A whole bunch of random text. A whole bunch of random text. A whole bunch of random text.</div> 
 
</div>

Answer 1

にフレックス適用できます。要素をブロックとしてキャストするには、コンテナの幅を手動で指定する必要があります。そうでない場合、ブロックは親の幅の100％を占めるため、要素を独自の行に配置します。

相続人例： https://jsfiddle.net/q4d2rjjf/1/

Answer 2

右側にスペースを追加するには、私はfloatとmarginを使用します。

#content_wrap { 
 
    width: 700px; 
 
    margin: 0px; 
 
    padding: 50px 0px 0px; 
 
} 
 
#content_photo { 
 
    vertical-align: top; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    display: inline; 
 
    position: relative; 
 
    float: left; 
 
} 
 
#content_desc { 
 
    vertical-align: top; 
 
    margin: 0px 0px 0px 10px; 
 
    float: left; 
 
    display: block; 
 
    position: relative; 
 
    width: 535px; 
 
} 
 
#aphoto { 
 
    width: 150px; 
 
    height: auto; 
 
}

<div id="content_wrap"> 
 
    <div id="content_photo"> 
 
    <img id="aphoto" src="//placehold.it/100?text=Image" /> 
 
    </div> 
 
    <div id="content_desc">A whole bunch of random text. A whole bunch of random text. A whole bunch of random text. A whole bunch of random text. A whole bunch of random text.</div> 
 
</div>

上記のコードが与えます私のようなもの：

Answer 3

あなたはまただけの問題では、あなたがdisplay: inline;代わりのdisplay: inline-block;を使用していることであるラッピングのdiv

#content_wrap { 
 
    width: 700px; 
 
    margin: 0px; 
 
    padding: 50px 0px 0px; 
 
    display: flex; 
 
} 
 
#content_photo { 
 
    vertical-align: top; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    position: relative; 
 
} 
 
#content_desc { 
 
    vertical-align: top; 
 
    margin: 0px; 
 
    padding: 0px 0px 0px 100px; 
 
    position: relative; 
 
} 
 
#aphoto { 
 
    width: 150px; 
 
    height: auto; 
 
}

<div id="content_wrap"> 
 
    <div id="content_photo"> 
 
    <img id="aphoto" src="//placehold.it/100?text=Image" align="left"> 
 
    </div> 
 
    <div id="content_desc">A whole bunch of random text. A whole bunch of random text. A whole bunch of random text. A whole bunch of random text. A whole bunch of random text.</div> 
 
</div>