图片将不会与父级内的文本内联显示 div

Question

我有一个包含文本和徽标的父项 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

问题是您没有真正将两个元素都向左浮动。您已将 .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 可能更适合。

希望这对您有所帮助！ :)

图片将不会与父级内的文本内联显示 div

Image will not display inline with text within parent div

html

css

image

css-float

display