!http://postimg.org/image/ym5xp7ilv/
我要实现的是移动div项,当单击每个项时,将其单击在div容器的顶部...其余的项(未单击的项)将填充div的其余部分分别的容器
的HTML
<div class="row">
<div class="col-md-12">
<div class="containing_div">
<div class="container_div"></div>
<div class="menu_div">
<div class="item_div">Photos</div>
<div class="item_div">Video</div>
<div class="item_div">Music</div>
<div class="item_div">Files</div>
<div class="item_div">Contacts</div>
</div>
</div>
</div>
</div>
的CSS
.containing_div
{
height: 100%;
}
.container_div
{
background: #fff;
height: 100%;
width: 90%;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
text-align: center;
font-family: "Open Sans";
font-size: 26px;
float: left;
padding-top: 25px;
position: relative;
}
.menu_div
{
background: transparent;
float: left;
}
.item_div
{
background: #ddd;
height: 80px;
color: #bbb;
font-family: "Open Sans";
font-size: 16px;
font-weight: 300;
margin-bottom: 10px;
text-align: center;
padding: 8px;
border-radius: 0 2% 2% 0;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
cursor: pointer;
cursor: hand;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句