Div内のイメージと長いテキストインライン

Question

Div内にイメージとダイナミックテキストをインラインで表示する必要があります。

問題は、このテキストが長すぎる場合、テキストの左揃えを維持するのではなく、Divの開始から次の行テキストが始まることです。

私はこのようなものが欲しいです。おかげ

Answer 1

は、私は、タスクのこの種のCSSの背景機能を使用するのが大好き。 padding-leftは画像のスペースを確保しますので、必要に応じて調整してください。 background-sizeで画像サイズを制御することもできます。

.icon-box{ 
 
\t padding: 25px; 
 
\t padding-left: 75px; 
 
\t background-repeat: no-repeat; 
 
\t background-image: url(https://www.gravatar.com/avatar/f087769399da5144ae10c892ae279490?s=32&d=identicon&r=PG); 
 
\t background-position: 25px center; 
 
\t background-color: #dedede; 
 
}

<div class="icon-box"> 
 
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
 
</div>

Answer 2

<div class="flex-container"> 
    <div class="flex-item"> 
     <img /> 
    </div> 
    <div class="flex-item"> 
     <p>This is the short or long text. Longer than shorter. Maybe.</p> 
    </div> 
</div> 

.flex-container { 
    display: flex; 
    flex-direction: row; 
} 

.flex-item { 
    align-self: center; 
} 

Answer 3

あなたはコードの下に使用して本部内の画像およびいくつかのダイナミックテキストをインラインで表示することができます

div.main{ 
 
    border:solid black 1px; 
 
    display:table; 
 
    padding:5px; 
 
    width:100%; 
 
    margin:5px 0; /* you can change/remove margin */ 
 
} 
 

 
div.main .image{ 
 
    vertical-align:middle; 
 
    display:table-cell; 
 
    padding-right:5px; 
 
    width:50px; /* you can change width */ 
 
} 
 
div.image img{ 
 
    width:100%; 
 
    height:50px; /* you can change height */ 
 
    vertical-align:middle; 
 
} 
 
div.your-text{ 
 
    vertical-align:middle; 
 
    display:table-cell; 
 
    text-align:justify; 
 
}

<div class="main"> 
 
    <div class="image"><img src="your_iamge_link" /></div> 
 
    <div class="your-text">Type your text here. Type your text here. Type your text here. Type your text here. Type your text here. Type your text here. Type your text here. Type your text here.</div> 
 
</div>