CSS Image 和 Div 不会保持内联

Question

更新：所以我创建了a JSFFiddle，只要“Bio”和“Reason”段落很短，它就可以在那里完美运行。但是一旦它们比图像大很多，它们就会拒绝内联并进入下一行。

我正在尝试将图像放在包含两个段落的 DIV 旁边。由于某种原因，它不会内联，我不知道为什么。

这是 HTML：

<div id="complete_entry">
    <a name="poet106"></a>
    <h1 class="lexpomo" id="poet_list"><a href='#poet106'>Poet Name</a><br /></h1>
    <p class="lexpomo" id="sign_up_date">
        2016-05-29 22:29:56
    </p>
    <img src="http://localhost/accents/wp-content/uploads/lexpomo/inkwell.svg" class="lexpomo" id="poet_avatar" />
    <div id="poet_list_block">
        <p class="lexpomo" id="poet_bio">
            <strong>Bio: 
            </strong><br />
            Paragraph-length bio.
        </p>
        <p class="lexpomo" id="poet_reason">
            <strong>Reason for signing up: </strong><br />
            Paragraph-length reason.
        </p>
    </div>
</div>

这是 CSS：

.complete_entry {
    display: block;
    clear: both;
}

#sign_up_date {
    font-style: italic;
    font-size: 10pt;
}

#poet_bio, #poet_reason {
    margin-left: 10px;
    display: block;
    clear: both;
}

h1#poet_list,
h1#poet_list a{
    margin: 30px 0 0 0;
    padding: 0;
    line-height: normal;
    font-weight: bold;
}

img.lexpomo#poet_avatar {
    width: 100px;
    max-height: 200px;
    min-height: 50px;
    display: inline;
    clear: left;
    float: left;
    background-color: black;
}

#poet_list_block {
    display: inline;
    float: left;
    clear: none;
}

我在 WordPress 上运行它，但我认为这对这个问题不重要。

提前谢谢你！

Answer 1

发生这种情况的原因是，由于您的 poet_list_block 上没有指定宽度，并且您的 p 元素包含足够的文本来填充整行，因此 p 元素定义了整个块的宽度，并且使其达到 100%。这意味着当前行上的块没有空间，这就是它下降到下一行的原因。

从您的问题来看，您似乎希望这两个段落位于图像右侧的单个正方形 div 中，而不是将它们放在下一行或独立浮动（并包裹在图像下方）。最简单的方法是使用 CSS table 样式而不是浮点数。

结果截图：

工作现场演示：

#sign_up_date {
    font-style: italic;
    font-size: 10pt;
}

#poet_bio, #poet_reason {
    margin-left: 10px;
    margin-top: 0;
}

h1#poet_list,
h1#poet_list a{
    margin: 30px 0 0 0;
    padding: 0;
    line-height: normal;
    font-weight: bold;
}

img.lexpomo#poet_avatar {
    width: 100px;
    height: 100px;
    max-height: 200px;
    min-height: 50px;
    background-color: black;
}

.bio_container {
  display: table;
}

.bio_container > * {
  display: table-cell;
  vertical-align: top;
}

<div id="complete_entry">
    <a name="poet106"></a>
    <h1 class="lexpomo" id="poet_list"><a href='#poet106'>Poet Name</a><br /></h1>
    <p class="lexpomo" id="sign_up_date">
        2016-05-29 22:29:56
    </p>
    <div class="bio_container">
    
    <img src="http://localhost/accents/wp-content/uploads/lexpomo/inkwell.svg" class="lexpomo" id="poet_avatar" />
    <div id="poet_list_block">
        <p class="lexpomo" id="poet_bio">
            <strong>Bio: 
            </strong><br />
            Paragraph-length bio. Paragraph-length bio. Paragraph-length bio. Paragraph-length bio. Paragraph-length bio. Paragraph-length bio. Paragraph-length bio. Paragraph-length bio. Paragraph-length bio. Paragraph-length bio. Paragraph-length bio. Paragraph-length bio. Paragraph-length bio. Paragraph-length bio. Paragraph-length bio. Paragraph-length bio. Paragraph-length bio. Paragraph-length bio. Paragraph-length bio. 
        </p>
        <p class="lexpomo" id="poet_reason">
            <strong>Reason for signing up: </strong><br />
            Paragraph-length reason.
        </p>
    </div>
    </div>
</div>

JSFiddle 版本：https://jsfiddle.net/6upL7gzc/