Html 为什么不是'；我的徽标是否与我的h1元素共享标题div？_Html_Css

Html 为什么不是'；我的徽标是否与我的h1元素共享标题div？

html css

Html 为什么不是'；我的徽标是否与我的h1元素共享标题div？,html,css,Html,Css,我对CSS还是很陌生，所以如果这是显而易见的，请原谅我，但我有以下html： <html> <head>  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <link rel="stylesheet" h

我对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>

但我没有这个，我有这个：

这里的标志和h1标签只是不想分享标题div！我想这是因为在某个地方我有一些css说“抓住整个页面的宽度！！！1”，但我看不到它

有人能帮你找出这两张图片为什么不共享吗？

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

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

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

这将是很好的，您使显示：内联块在H1不占用所有的标题太多

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

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

这样做，你可以改变位置使用绝对坐标和h1将不会影响你的标志。注意页眉类div中的所有h1元素都将受到影响。

您希望如何处理？我的意思是什么是question@ShabanKhan在上面的图片中，你可以看到鹿角标志正在将h1标签（上面写着GantlR）的内容推到它下面。但我想要的是让他们并肩作战。我想保持响应选项的开放性，所以我没有实施这个解决方案。但是谢谢！

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

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