[英]How to align inner divs in centre or bottom based on %
In my JS application, I have a panel that is spited in 3 sections each with width: 100%
and height:33.33%
then in each section I want to have some divs. 在我的JS应用程序中,我有一个面板,该面板分为3个部分,每个部分的
width: 100%
, height:33.33%
然后在每个部分中都需要一些div。
$(".panel2").hide(); $(".panel1").click(function() { $(this).hide(); $(".panel2").show(); }); $(".panel2").click(function() { $(".panel1").show(); $(this).hide(); });
div.box { width: 400px; height: 400px; border: 1px solid #000; overflow: hidden; position: relative; } div.box > .blur { width: 100%; height: 100%; background: url(http://goo.gl/0VTd9W); -webkit-filter: blur(8px); } div.box > .panel1, div.box > .panel2 { width: 100%; Height: 100%; Background: rgba(0, 0, 0, 0.5); position: absolute; left: 0px; top: 0px; } div.box > .panel2 { background: rgba(255, 0, 0, 0.2); } /** sub sections **/ div.panel1 > .top, div.panel1 > .middle, div.panel1 > .bottom { width: 100%; height: 33.33%; border: 1px dashed #000; } div.middle > div, div.bottom > div { width: 30px; height: 30px; border: 1px dashed #000; float: left; margin: 10px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="box"> <div class="blur"></div> <div class="panel1"> <div class="top"></div> <div class="middle"> <div></div> <div></div> <div></div> </div> <div class="bottom"> <div></div> <div></div> <div></div> </div> </div> <div class="panel2">Panel 2</div> </div>
As you can see I have implemented the divs but cannot align them in the described positions since the parent divs are percentage based. 如您所见,我已经实现了div,但是由于父div基于百分比,因此无法将它们对齐到所描述的位置。
Any idea to align them? 有什么想法可以对齐它们吗?
There are a lot of ways that you can achieve your desire situation such as transform: translate(-50%);
您可以通过多种方法来实现自己的愿望,例如:
transform: translate(-50%);
, position:absolute
and negative margin
, display:inline-block;
,
position:absolute
和负margin
, display:inline-block;
, display: flex;
,
display: flex;
and etc. Here, display:inline-block;
在这里
display:inline-block;
is used. 用来。 You can add one more div(
.centered-vertically
), give height:100%;
您可以再添加一个div(
.centered-vertically
),得到height:100%;
and don't forget remove extra spaces which is occurred by display:inline-block;
并且不要忘记删除
display:inline-block;
多余空间 display:inline-block;
and finally, use vertical-align
property to align them to bottom
, middle
and top
. 最后,使用
vertical-align
属性将它们与bottom
, middle
和top
对齐。 However, here is completed code. 但是,这里是完整的代码。
$(".panel2").hide(); $(".panel1").click(function() { $(this).hide(); $(".panel2").show(); }); $(".panel2").click(function() { $(".panel1").show(); $(this).hide(); });
div.box { width: 400px; height: 400px; border: 1px solid #000; overflow: hidden; position: relative; } div.box > .blur { width: 100%; height: 100%; background: url(http://goo.gl/0VTd9W); -webkit-filter: blur(8px); } div.box > .panel1, div.box > .panel2 { width: 100%; Height: 100%; Background: rgba(0, 0, 0, 0.5); position: absolute; left: 0px; top: 0px; } div.box > .panel2 { background: rgba(255, 0, 0, 0.2); } /** sub sections **/ div.panel1 > .top, div.panel1 > .middle, div.panel1 > .bottom { width: 100%; height: 33.33%; border: 1px dashed #000; } div.middle > div:not(.centered-vertically), div.bottom > div:not(.centered-vertically) { width: 30px; height: 30px; border: 1px dashed #000; display:inline-block; vertical-align:middle; margin: 10px; } div.bottom > div:not(.centered-vertically) { vertical-align:bottom; } div.middle > .centered-vertically, div.bottom > .centered-vertically { display:inline-block; vertical-align:middle; height:100%; } div.middle { text-align:center; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="box"> <div class="blur"></div> <div class="panel1"> <div class="top"></div> <div class="middle"> <div class="centered-vertically"></div><div></div><div></div><div></div> </div> <div class="bottom"> <div class="centered-vertically"></div><div></div><div></div><div></div> </div> </div> <div class="panel2">Panel 2</div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.