[英]Align/Wrap images around div
我想要实现的是一个div位于屏幕中间(720x360)中心的页面。 这是使用jQuery完成的:
$(window).height()
和:
$(window).width()
完美地工作。
下一部分将获得180x180的图像以适合该中间div。 这些将填满屏幕+。
我一直在坚持如何使它们保持一致的方式,而我找不到任何人在做相同事情的真实例子。
那么,这可能吗?
<style type="text/css">
#main {
display: block;
margin:0 auto; /* This is make div into center of screen*/
width: 720px;
height: 360px;
background: #ccc; /* Just for visibility */
position: relative; /* As we want to make other div into center of this */
}
#content {
display: block;
width: 180px;
height: 180px;
position: absolute;
left: 36.36%; /* You can calculate using math */
/*
Total Width - Width
So you will get end point now minus half
Width / 2 = 90
Then 720 - 180 = 540
And now your box will point to end but you need to divide
half of width again 90/2 = 45
Result is :
180/2/2 = 45
720-180-45 = 495
180/495*100 = 36.36
So this is your width position.
* */
top: 25%;
/*
Same for height but as you can see it's 25% of your value and very easy
* */
background: red;
}
</style>
<div id="main">
<div id="content"></div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.