html - CSS 图像和 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 元素定义了整个 block 的宽度并使其为 100%。这意味着当前行没有空间容纳该 block ，这就是它下降到下一行的原因。

从你的问题来看，你似乎希望这两个段落位于图像右侧的单个正方形 div 中，而不是让它们位于下一行或独立 float (并换行在图像下)。最简单的方法是使用 CSS table 样式而不是 float。

结果截图:

工作现场演示:

#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/