Div中的图像和长文本内联

Question

我需要在Div中显示内嵌的图像和一些动态文本。

问题是当这个文本太长时，下一行文本从Div的开始开始，而不是保持文本左对齐。

我想要这样的东西。感谢

Answer 1

我喜欢将css背景功能用于此类任务。 padding-left为图片腾出空间，因此请务必根据需要进行调整。您还可以使用background-size控制图像大小。

.icon-box{
	padding: 25px;
	padding-left: 75px;
	background-repeat: no-repeat;
	background-image: url(https://www.gravatar.com/avatar/f087769399da5144ae10c892ae279490?s=32&d=identicon&r=PG);
	background-position: 25px center;
	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中显示内嵌的图像和动态文本：

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>