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

Question

我有一个包含文本和 Logo 的父 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;
}

Answer 1

问题是您没有真正将两个 元素都 float 到左侧。您已将 .heading 和 #logo float 到左侧，但 float 元素应该是兄弟。因此，.heading 将 float 到任何同级元素的左侧，并且 h1 根本没有设置为 float。

要对齐图像，您需要做的就是将 h1 也 float 到左侧:

.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 可能更适合。

希望对您有所帮助! :)