Question

我正在HMTL / CSS中创建一个标题。

我的图片包含在<div>元素中。我希望它出现在页面的左上角。为实现这一点，我将<div>元素浮动到左边并在我的HTML中列出元素FIRST。其显示属性设置为inline-block。

我在<h1>代码中使用了一些文字。这也在其自己的<div>元素内。我已将其<div>的显示属性设置为inline-block，并将其浮动到左侧。

为什么文本出现在图像的左侧？如果我先列出图像，那么图像应该在h1文本之前显示。

有人可以解释为什么会这样吗？

header {
  display: block;
}

.headerTop {
  background-color: black;
  border-bottom: 1.5rem solid #2B6868;
  padding-left: 1em;
  padding-top: 1em;
  padding-right: 1em;
  padding-bottom: 0.75em;
  border-top-width: 5px;
  display: block;
  clear: none;
}

.headerTop_Logo {
  display: inline-block;
  clear: none;
}

#MyLogo {
  height: 40px;
  width: 341px;
  float: left;
  display: inline-block;
  clear: none;
}

.headerTop_Title {
  display: inline-block;
  float: left;
  clear: none;
  vertical-align: top;
}

.headerTop_Title h1 {
  color: white;
  font-family: verdana, sans-serif;
  font-weight: normal;
  font-size: 28px;
  margin-top: 0px;
  margin-bottom: 0px;
  display: inline-block;
  clear: none;
}

<div class="PageContainer">
  <header>
    <div class="headerTop">
      <div class="headerTop_Logo">
        <img id="MyLogo" src="//via.placeholder.com/341x40" alt="My Logo" />
      </div>
      <div class="headerTop_Title">
        <h1>Service Model Pilot</h1>
      </div>
    </div>
  </header>
</div>

Answer 1

您正悬空<img>左侧，这是.headerTop_Logo的孩子。因此，图像仅在其包含<div>的范围内浮动。浮动.headerTop_Title左侧将标题置于其兄弟的左侧，即未展开的.headerTop_Logo。

一个建议是使用inline-block或float，但不一定都是。下面，我将.headerTop_Logo和.headerTop_Title都设置为inline-block，以便它们水平显示在彼此旁边。

header {
  display: block;
}

.headerTop {
  background-color: black;
  border-bottom: 1.5rem solid #2B6868;
  padding:1em 1em .75em;
}

.headerTop_Logo {
  display:inline-block;
}

#MyLogo {
  height: 40px;
  width: 241px;
}

.headerTop_Title {
  display: inline-block;
  vertical-align: top;
}

.headerTop_Title h1 {
  color: white;
  font-family: verdana, sans-serif;
  font-weight: normal;
  font-size: 28px;
  margin:0;
}

<div class="PageContainer">
  <header>
    <div class="headerTop">
      <div class="headerTop_Logo">
        <img id="MyLogo" src="//via.placeholder.com/241x40" alt="My Logo" />
      </div><div class="headerTop_Title">
        <h1>Service Model Pilot</h1>
      </div>
    </div>
  </header>
</div>

这是一个浮动的例子请注意.group为.headerTop父.group:after { content: ""; display: table; clear: both; } header { display: block; } .headerTop { background-color: black; border-bottom: 1.5rem solid #2B6868; padding:1em 1em .75em; } .headerTop_Logo { float:left; } #MyLogo { height: 40px; width: 241px; display:block; } .headerTop_Title h1 { color: white; font-family: verdana, sans-serif; font-weight: normal; font-size: 28px; margin:0; }的{{1}}课程。

<div class="PageContainer">
  <header>
    <div class="headerTop group">
      <div class="headerTop_Logo">
        <img id="MyLogo" src="//via.placeholder.com/241x40" alt="My Logo" />
      </div>
      <div class="headerTop_Title">
        <h1>Service Model Pilot</h1>
      </div>
    </div>
  </header>
</div>

bp_data = list(
  set = c(1,1,2,2,3,3,4,4),
  var = rep(c("red", "green"), 4),
  val = t(matrix(runif(800, 1, 50)+seq(1,40,length=800 ), 100, 8)) # fake data
)

str(bp_data)
#List of 3
# $ set: num [1:8] 1 1 2 2 3 3 4 4
# $ var: chr [1:8] "red" "green" "red" "green" ...
# $ val: num [1:8, 1:100] 37.9 27.1 40.7 22.4 32.4 ...

CSS浮动顺序不符合预期。为什么？

1 个答案: