Question

我正在尝试使用css和jQuery ui复制此站点：http://www.carbonstudio.co.uk/

我想知道如何使用CSS来定位li图库项目，这样就像样本中的下拉区域一样？

我的JS小提琴如下：

http://jsfiddle.net/elogicmedia/GG5EL/11/

关于列表库的当前CSS代码是：

#gallery { float: left; width: 100%; min-height: 12em; }
.gallery.custom-state-active { background: #eee; }
.gallery li { 
float: left; width: 100px; height: 100px; margin: 0 0.4em 0.4em 0; text-align: center;  cursor: move; 
-webkit-border-radius: 50px;
 -moz-border-radius: 50px;
 border-radius: 50px; 
}
.gallery li h5 { margin: 0 0 0.4em; }
 .gallery li a { float: right; }
.gallery li a.ui-icon-zoomin { float: left; }
.gallery li img { width: 100%; cursor: move; }

Answer 1

一种方法是将这些LI放在#trash div中，并给每个position: absolute。给#trash div position: relative并单独定位每个LI相对于#trash div的中心。这是一个粗略的例子：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">

#trash {position: relative; padding: 200px; display: table; vertical-align: middle; text-align: center;}

.gallery {list-style: none; margin: 0; padding: 0;}

.gallery li {position: absolute; border: 1px solid #aaa; width: 100px; height: 100px; text-align: center; cursor: move; border-radius: 50px;}

.gallery li.one {top: 0; left: 50%; margin-left: -50px;}
.gallery li.two {bottom: 0; left: 50%; margin-left: -50px;}
.gallery li.three {right: 0; top: 50%; margin-top: -50px;}
.gallery li.four {top: 25%; right: 25%; margin-top: -60px; margin-right: -60px;}
.gallery li.five {bottom: 25%; right: 25%; margin-bottom: -60px; margin-right: -60px;}
.gallery li.six {bottom: 25%; left: 25%; margin-bottom: -60px; margin-left: -60px;}
.gallery li.seven {left: 0; top: 50%; margin-top: -50px;}
.gallery li.eight {top: 25%; left: 25%; margin-top: -60px; margin-left: -60px;}

</style>

</head>
<body>


<div id="trash">
    <h4>Drop Here</h4>

    <ul class="gallery">
        <li class="one">
        <h5>Mobile Billing Solutions</h5>
        </li>
        <li class="two">
        <h5>Mobile Advertising</h5>
        </li>
        <li class="three">
        <h5>Mobile Web</h5>
        </li>
        <li class="four">
        <h5>Mobile Database Acquisition</h5>
        </li> 
        <li class="five">
        <h5>Loyalty</h5>
        </li>    
        <li class="six">
        <h5>Creative Design</h5>
        </li>
        <li class="seven">
        <h5>Project Management</h5>
        </li>
        <li class="eight">
        <h5>Email Management</h5>
        </li>
        <!-- <li class="">
        <h5>TV Lead Generation </h5>
        </li>   -->
    </ul> 

</div>

</body>
</html>

CSS：将圆圈（li）定位成圆圈

1 个答案: