为什么我的徽标不与我的 h1 元素共享 header div？

Question

我对 CSS 还是很陌生，所以如果这很明显请原谅我，但我有这个 html:

<html>
    <head>
    <!-- external includes -->
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

    <!-- local includes -->
        <link rel="stylesheet" href="{% static 'css/site.css' %}">
        <title>gAnttlr</title>
    </head>
    <body>
        <div class="page-header fixed-div">
            <img src ="{%static 'svg/antler3.svg'%}" class="antler-icon fit-div" alt="Medium sized antler">
            <h1>gAnttlr</h1> 
        </div>
    </body>
</html>

_{我正在使用 django template-y 东西，如果它有助于假装 src ="{%static 'svg/antler3.svg'%}" 是 src ="/svg/antler3.svg"}

我的相关 css 是：

.page-header {
    background-color: #ff9400;
    margin-top: 0;
    padding: 20px 20px 20px 40px;
}

.page-header h1, .page-header h1 a, .page-header h1 a:visited, .page-header h1 a:active {
    color: #ffffff;
    font-size: 36pt;
    text-decoration: none;
}
.page-header img{
  float: left;
  width: 100%;
  height: 100%;
}
.page-header h1 {
  position: relative;
}
img .fit-div{
    width: 100%;
    max-height: 100%;
    display:inline;
}

div.fixed-div{
    height:110px;
}

但是我没有这个 example from here，而是这个：

这里的logo和h1标签只是不想共享headerdiv！我认为这是因为我在某个地方看到了一些 css 说 "Grab the whole width of the page!!!1" 但我看不到它。

有人可以帮忙找出为什么这两个不分享吗？

Answer 1

问题是你的图片有 100% 的宽度，占据了你所有的 header

使用自动设置图片宽度或提供正确的尺寸

.page-header img {
    float: left;
    height: 100%;
    width: auto;
}

最好在 H1 显示：inline-block，不要占用你所有的 header。

.page-header h1 {
  position: relative;
  display: inline-block;
}

Answer 2

根据您的总体设计（是否响应式？），这可能是一个糟糕的解决方案，但是.. 尝试将 页眉 h1 更改为

.page-header h1 {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 100px;
  height: 100px;
}

这样做您可以使用绝对坐标更改位置，h1 不会影响您的徽标。请注意页眉 class div 中的所有 h1 元素都会受到影响。

为什么我的徽标不与我的 h1 元素共享 header div？

Why isn't my logo sharing the header div with my h1 element?

html

css