Question

我有 div ，在其中，我有一个 img 元素和另一个 div 元素 h3 和 p 元素（没问题）： HTML：

<div id="imgandtext">
    <img src="https://lh5.googleusercontent.com/-hlvQp1p4RwQ/AAAAAAAAAAI/AAAAAAAAABQ/FmK4byxMObk/photo.jpg"/>
    <div id="text">
        <h3>the h3 title</h3>
        <p>The paragraph to put INLINE with the img and under the h3</p>
    </div>          
</div>

我想把img和div称为'text'。

我尝试了不同的方法，包括显示：内联，它总是导致元素在另一个下面显示。我该如何解决？（注意：我想保留h3在p元素之上）提前感谢您，需要所有帮助并表示赞赏。

Answer 1

我会使用浮动：

#imgandtext > img {
    float: left;
}
#imgandtext, #text {
    overflow: hidden;
}

将float: left用于图片会将其放在#text的左侧。

但是为了确保浮动元素不会溢出#imgandtext以防图像高于#text，您需要#imgandtext { overflow: hidden; }。

如果#text比图片高，如果您想要对齐，则可能需要#text { overflow: hidden; }。

jsFiddle

CSS - 显示<img/>和<div>内联</div>

1 个答案: