容器高度小于其内容

-1

我希望将类别logo1的黑色实线边框放置在粉红色之后，但它放在容器的颜色蓝色之后。我需要做些什么改变？容器高度小于其内容

.menu-wrap { 
 
    background-color: blue; 
 
    height: 50px; 
 
    padding: 30px 0 0 20px; 
 
} 
 
.menu { 
 
    background-color: pink; 
 
    overflow: hidden; 
 
    width: 700px; 
 
    height: 75px; 
 
} 
 
.logo1 { 
 
    height: 100px; 
 
    border: solid; 
 
}

<div class="menu-wrap"> 
 
    <ul class="menu"> 
 
    </ul> 
 
</div> 
 
<div class="logo1"> 
 
</div>

来源

2016-03-19 k_learner

你的问题很模糊。你能澄清一下吗？ –

你想要看起来像[这]（https://jsfiddle.net/frayne_konok/aoaheL3q/） –

谢谢@FrayneKonok –

编辑 - - - - -

Jsfiddle

根据要求，相同的结果，但根据需要编辑第三个div的位置。

这对定位值有些不好意思，如果你在菜单中使用div而不是UL，并且将它们全部包含在一个包含div的对象中，则可以将事情定位得更加整齐。

现在，下面是如何让我使用您指定的布局工作。

HTML

<div class="menu-wrap"> 
    <ul class="menu"> 
    </ul> 
</div> 

<div class="logo1"> 
</div>

CSS

.menu-wrap { 
    background-color: blue; 
    height: 50px; 
    padding: 30px 0 0 20px; 
} 

.menu { 
    background-color: pink; 
    width: 700px; 
    height: 75px; 
} 

.logo1 { 
    width: 735px; 
    height: 100px; 
    border: solid; 
    position: absolute; 
    top: 128px; 
    left: 28px; 
}

OLD答案 - - - - -

Jsfiddle

我不太清楚你的意思，我砍死一起快速地看到如果这是你的目标。

HTML

<div class="menu-wrap"> 
    <ul class="menu"> 
    </ul> 
    <div class="logo1"> 
</div> 
</div>

CSS

.menu-wrap { 
    background-color: blue; 
    height: 50px; 
    padding: 30px 0 0 20px; 
} 
.menu { 
    background-color: pink; 
    width: 700px; 
    height: 75px; 
} 
.logo1 { 
    width: 737px; 
    height: 100px; 
    border: solid; 
    margin: -18px 0; 
}

来源

2016-03-19 16:49:19 Zakalwe

是的，我只想要这个，但我不想把logo1 div放在菜单包装里！ –

我编辑了我的答案。您可以使用位置绝对值将边界格移动到精确的位置。最好使用一个带有'relative'值的父元素作为参考点，但它会在没有它的情况下工作。 – Zakalwe

谢谢:)但你怎么猜测这些737px和18px的值？ –

.menu-wrap { 
 
    background-color: blue; 
 
    height: 50px; 
 
    padding: 30px 0 0 20px; 
 
} 
 
.menu { 
 
    background-color: pink; 
 
    overflow: hidden; 
 
    width: 700px; 
 
    height: 75px; 
 
} 
 
.logo1 { 
 
    height: 100px; 
 
    border: solid; 
 
}

<div class="menu-wrap"> 
 
    <ul class="menu"> 
 
    </ul> 
 
<div class="logo1"> 
 
</div> 
 
</div>

来源

2016-03-19 16:42:41

你已经包括菜单包装logo1，但我不想放置菜单包装logo1 div ..任何其他解决方案？ –

容器高度小于其内容

回答

相关问题