0

我正在尝试使用 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; }
4

1 回答 1

0

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

<!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>
于 2013-05-09T00:59:14.103 回答