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

1 つのアプローチは、これらの LI を#trashdiv 内に配置し、それぞれにposition: absolute. #trashdivを指定し、 divposition: relativeの中心に対して各 LI を個別に配置し#trashます。大まかな例を次に示します。

<!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 に答える