我想知道为什么mainCountainerHeadLogo
不拉伸父 divmainCountainerHead
高度?
如果我缩放页面,都mainCountainerHeadTitle
和mainCountainerHeadMenu
舒展mainCountainerHead
就好了。
抱歉我的英语,并提前致谢!
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
.mainCountainer {
min-height: 100%;
width: 70%;
margin: 0 auto;
}
.mainCountainerHead {
background-color: aqua;
height: auto;
}
.mainCountainerHeadLogo {
height: 100px;
width: 20%;
background-color: blue;
float: left;
position: relative;
overflow: hidden;
}
.mainCountainerHeadLogo img {
position: absolute;
width: 100%;
height: auto;
top: -50%;
right: -50%;
bottom: -50%;
left: -50%;
margin: auto
}
.mainCountainerHeadTitle{
margin-left: 20%;
width: 80%;
height: auto;
text-align: center;
padding-top: 3%;
}
.mainCountainerHeadMenu{
margin-left: 20%;
text-align: center;
background-color: orange;
width: 80%;
height: auto;
padding-top: 2%;
text-align: center;
}
.mainLink {
display: inline-block;
padding: 5px;
}
.mainLinkButton {
width: 90px;
height: 30px;
background-color: green;
font-size: 16px;
border: none;
color: white;
padding: 5px;
}
.mainLinkButton:hover {
background-color: darkgreen;
}
.mainLinkDropdown {
position: relative;
display: inline-block;
padding: 5px;
}
.dropdownContent {
display: none;
position: absolute;
min-height: 30px;
min-width: 130px;
text-align: left;
background-color: #f1f1f1;
z-index: 10;
}
.dropdownContent a {
display: block;
color: black;
padding: 12px 16px;
text-decoration: none;
}
.mainLinkDropdown:hover .dropdownContent{
display: block;
}
.dropdownContent a:hover{
background-color: #ddd;
}
<div class="mainCountainer">
<div class="mainCountainerHead">
<div class="mainCountainerHeadLogo">
<img src="https://i.ibb.co/cYzWJFM/logo-Copy.jpg" title="logo" />
</div>
<div class="mainCountainerHeadTitle">
<h4>Welcome aboard!</h4>
</div>
<div class="mainCountainerHeadMenu">
<div class="mainLink">
<button class="mainLinkButton">Main</button>
</div>
<div class="mainLinkDropdown">
<button class="mainLinkButton">Dropdown</button>
<div class="dropdownContent">
<a href="">Link 1</a>
<a href="">Link 2</a>
<a href="">Link 3</a>
</div>
</div>
<div class="mainLink">
<button class="mainLinkButton">Contacts</button>
</div>
</div>
</div>
</div>
那是因为该float
属性将 HTML 元素置于正常页面流之外,这会导致您遇到的情况。它的效果类似于position: absolute
将元素移动到“不同的层”。
嗯……有很多方法可以实现你想要的,而且几乎所有方法都需要重构你的代码。实际上,您有很多代码难以实现您的目标。您应该摆脱float
并开始使用其他技术,例如 Flexbox。
如果您提供所需布局的草图,我可以向您展示解决方案。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句