好吧，所以我在学习html和css，所以我对此相对陌生。我关注了许多youtube视频来创建不同的布局。然而，我在遵循这个特定的教程时遇到了真正的麻烦(https://www.youtube.com/watch?v=Wwe2zOz030o)。在本教程中，它展示了如何使用css转换效果制作一个非常酷的导航栏，然而，当窗口调整大小并悬停以展开一个div时，它会将所有其他div向下移动到页面上。无论窗口大小，我都希望div始终保持在容器中。我希望这真的很简单。。。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
@import url("styles.css");
</style>
</head>
<body>
<div id="container">
<a href="#"><div class="menu">
<p class="p1">HOME</p>
<p class="p2">THIS IS OUR INTRO </p>
</div>
</a>
<div class="menu1">
<p class="p1">GALLERY</p>
<p class="p2">THIS IS MY PHOTOGRAPHY GALLERY</p>
</div>
<div class="menu2">
<p class="p1">ART PROJECTS</p>
<p class="p2">MY ART COLLECTION</p>
</div>
<div class="menu3">
<p class="p1">CONTACT</p>
<p class="p2">CONTACT ME</p>
</div>
</div>
</body>
</html>
CSS样式是。。。
a{text-decoration:none;
}
#container{
height: 125px;
width: auto;
background-color:rgba(0,0,0,1);
position: relative;
}
.menu{
height: 125px;
width: 150px;
background-color: rgba(139,62,181,1);
float: left;
transition: all .5s ease-in-out 0s;
}
.menu1{
height: 125px;
width: 150px;
background-color: rgba(255,153,0,1);
float: left;
transition: all .5s ease-in-out 0s;
}
.menu2{
height: 125px;
width: 150px;
background-color: rgba(53,108,255,1);
float: left;
transition: all .5s ease-in-out 0s;
}
.menu3{
height: 125px;
width: 150px;
background-color: rgba(154,44,21,1);
float: left;
transition: all .5s ease-in-out 0s;
}
.p1{
font-family: Verdana, Geneva, sans-serif;
font-size: 20px;
color: rgba(255,255,255,.7);
font-weight: bold;
position: relative;
width: 100px;
top: 0px;
left: 15px;
transition:all .2s ease-in-out 0s;
}
.p2{
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
color: rgba(255,255,255,.5);
position:relative;
top:0px;
left: 11px;
transition:all .2s ease-in-out 0s;
}
.menu:hover{
width:900px;
}
.menu1:hover{
width:900px;
}
.menu2:hover{
width:900px;
}
.menu3:hover{
width:900px;
}
.menu:hover .p1{
color:rgba(255,255,255,1);
}
.menu:hover .p2{
color:rgba(255,255,255,1);
}
.menu1:hover .p1{
color:rgba(255,255,255,1);
}
.menu1:hover .p2{
color:rgba(255,255,255,1);
}
.menu2:hover .p1{
color:rgba(255,255,255,1);
}
.menu2:hover .p2{
color:rgba(255,255,255,1);
}
.menu3:hover .p1{
color:rgba(255,255,255,1);
}
.menu3:hover .p2{
color:rgba(255,255,255,1);
}
使用"flexbox"是一个很好的例子
请查看您的代码和已实现的flexbox：
http://codepen.io/Nargus/pen/uymsI
我只向#container添加了display: flex;和overflow:hidden;。
还为每个菜单项添加了min-width（与宽度相同），以便flexbox知道其限制。menu*中的宽度：悬停可以随心所欲，所有额外内容都将由flexbox本身剪切。
Flexbox适用于所有现代浏览器：http://caniuse.com/#feat=flexbox