图像不会与父 div 中的文本内联显示

【问题标题】：Image will not display inline with text within parent div图像不会与父 div 中的文本内联显示
【发布时间】：2017-10-30 06:43:38
【问题描述】：

我有一个包含文本和徽标的父 div。这两个元素应该在同一行上彼此相邻出现。

尽管将两个元素都向左浮动，添加了代码以使图像和父容器都内联显示，并且确保父元素足够宽和高以包含图像，但图像在文本下方折叠。

HTML：

<div class="heading"><h1>Stanford Connection</h1><img src="tree-logo.gif" alt="Stanford Logo" id="logo"/></div>

CSS：

.heading {
width: 800px;
background-color: #9A0000;
color: white;
font-size: 20pt;
float: left;
overflow: hidden;
display: inline-block;
}

#logo {
float:left;
display: inline-block;
}

【问题讨论】：

标签： html css image css-float display

【解决方案1】：

问题在于您没有真正将两个元素都浮动到左侧。您已将.heading 和#logo 浮动到左侧，但浮动元素应该是siblings。因此，.heading 将浮动到任何同级元素的左侧，而 h1 根本不会设置为 float。

要对齐图像，您只需将h1 也向左浮动：

.heading {
  width: 800px;
  background-color: #9A0000;
  color: white;
  font-size: 20pt;
  float: left;
  overflow: hidden;
  display: inline-block;
}

h1, #logo {
  float: left;
}

<div class="heading">
  <h1>Stanford Connection</h1><img src="http://placehold.it/100" alt="Stanford Logo" id="logo" /></div>

请注意，根据您希望图像放置的位置确切，display: inline-block 可能更适合。

希望这会有所帮助！ :)

【讨论】：