Question

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

我正在尝试将图像放在包含两个段落的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样式而不是浮点数。

结果屏幕截图：

现场演示：

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

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

CSS Image和Div不会保持内联

1 个答案: