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浮动到左侧，但浮动元素应为兄弟。因此，.heading将浮动到任何同级元素的左侧，h1根本不会设置为float。

要对齐图片，您需要做的就是向左浮动h1：

＆＃13;

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

＆＃13;

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

＆＃13;

请注意，根据您希望图片位于完全的位置，display: inline-block可能更适合。

希望这有帮助！：）

图片不会与父div

1 个答案: