Question

这个问题已经在网上被问了很多。但每次尝试都没有成功

对于一个网站，我需要制作一个标题，我使用django +样板（我认为这样的样板应该是原因，因为我的代码在js小提琴中的复制粘贴工作，而它不是＆和＃39; t on local）。

以下是我使用的HTML：

<div id="topbar">
    <div id="networking">
        <div id="title">
            EasyMusik
        </div>
        <div id="logo">
            <img src="{% static "img/icons/myzik.svg" %}" />
        </div>
    </div>
</div>

这是CSS：

#topbar{
    display:block;
    background-color : #29A329;
    position: relative;
    float: top;
}
#tobbar div{
    height: 100%;
    display:inline-block;
}
#networking{
    padding-left:25%;
}
#networking div{
    display:inline-block;
}
#title{
    position: relative;
    height:100%;
    font-size: 24px;
}
#logo img{
    width:100%;
    display:block;
    float:left;
}
#logo{
    position: relative;
    height: 100%;
    padding-left:15px;
    background-color : #FF0000;
}

我得到了这个result

我希望Red区域能够填满绿色区域。我应该添加/删除哪个属性来实现呢？

编辑：最后设法得到一个小提琴： Fiddle here

Answer 1

给#topbar一个高度。如果您希望子容器的高度或宽度为100％，则父容器必须指定高度或宽度。祝你好运！

    #topbar{
        display:block;
        background-color : #29A329;
        position: relative;
        float: top;
        height: 200px
    }

Answer 2

这对我有用。虽然它不是你的CSS。

<强> CSS：

.parent
{
width:100%;
background-color:Green;
height:50px;
text-align:center;
font-size:24px;
}
.sub
{
width:50px;
background-color:Red;
height:50px;
display: inline-block;
}
.img
{
vertical-align:middle;
padding-top:15px;
}

<强> HTML：

<div class="parent">
Easy Muzik
<div class="sub">
<img alt="" class="img" src="style/img.png" />
</div>
</div>

使包含img的div占据全高

2 个答案: