在 div 周围对齐/环绕图像

【问题标题】：Align/Wrap images around div在 div 周围对齐/环绕图像
【发布时间】：2012-10-27 03:09:25
【问题描述】：

我想要实现的是一个 div 位于屏幕中间 (720x360) 的页面。这是使用 jQuery 完成的：

$(window).height()

和：

$(window).width()

完美运行。

下一部分是获取 180x180 的图像以适应中间 div。这些将填满整个屏幕。

我被困在如何让它们以这种方式对齐，我找不到任何人做同样事情的活生生的例子。

那么，这可能吗？

【问题讨论】：

你可以为设计写一个css类，让你的图片继承它。试试jquery中的“getattribute”
您不能使用将 div 置于中间但具有适当偏移坐标的相同技术来定位图像吗？也许你可以展示你到目前为止所拥有的东西（html、css 和 JS）。

标签： javascript jquery css alignment

【解决方案1】：

<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>

【讨论】：