可能这是一个菜鸟问题,但我想知道如何在垂直方向上进行类似的“环绕”操作。
This:Half-pad Element pad元素垫Element half-pad
This:
Half-pad
Element
pad
元素
垫
Element
half-pad
我也错过了如何做半垫。
做方向:垂直方向错过了起始和结束空间。
.stabled {
position: fixed;
right:0px;
top:0;
width:15px;
height:100%;
z-index:95;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.stabled ul {
position:relative;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction:column;
flex-direction:column;
height:100%;
width:170px;
}
nav.stabled ul li {
position:relative;
float:left;
margin: 0 auto;
}
.stabled li.firl {
padding-left:0;
padding-top:35px;
}
.stabled:hover {
position: fixed;
width:170px;
box-shadow: 0 0 10px #222;
-webkit-box-shadow: 0 0 40px #222;
-moz-box-shadow: 0 0 40px #222;
opacity: 1;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
解决。这是一个不同的错误,因为图像大小。解决方案很简单:codepen.io/devtips/pen/OPQYav(由youtube.com/user/DevTipsForDesigners制造)
.parent {
border: 3px solid orange;
height: 400px;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.child {
width: 100px;
height: 100px;
background: blueviolet
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句