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"}

我的相关信息是：

.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的here，而是我：

snip of my broken website

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

有人可以帮助发现为什么这两个人不会分享？

Answer 1

问题是您的图片有100％的宽度并占据了所有标题

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

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

你做显示会很好：H1的内联块也不会占用你所有的标题。

.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不会影响您的徽标。注意页面标题类div中的所有h1元素都会受到影响。

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

2 个答案: