1

jQueryとHTMLを使用して、 http：//www.aprica.jp/に似たカルーセルを作成しようとしています。そのためには、大きな（オーバーフローが隠された）divのコンテンツをビューポートの中央に水平に配置できる必要があります。どうすればそれができるのでしょうか？

4

2 に答える 2

0

OKバズ、もし私があなたが別の'オーバーフロー：隠された'divの中にdivを中央に置く方法が必要だと理解しているなら。内側のdivの幅は事前にわからないと思います。次のような方法で内部divの左マージンを計算する必要があるよりも、JQueryを使用したいと考えています。

<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>item List</title>
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="jquery-ui-1.8.2.custom.min.js"></script>
    <script type="text/javascript">
      <!--
        $(document).ready(function (){
            $('#div2').draggable();
            var halfScreen = $('#div2').parent().width()/2;
            var left = ($('#div2').width()/2)-halfScreen;
            $('#div2').css("left", (-left)+"px");
        });
      //-->
    </script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        #div1{
            width: 100%;
            height: 300px;
            margin: 80px 0;
            padding: 0;
            background: red;
            overflow: hidden;
        }
        #div2{
            width: 300%;
            height: 100px;
            margin: 100px 0;
            padding: 0;
            background: #ddd;
        }
        #div3{
            width: 50%;
            height: 100px;
            margin: 0;
            padding: 0;
            background: #aaa;
        }
    </style>
</head>

<body>
    <div id="div1">
        <div id="div2">
            <div id="div3"></div>
        </div>
    </div>
</body>

</html>

これは非常に単純なケースです。さらに必要な場合は、お問い合わせください。

PS：JQueryとJQuery.UIが必要です。

于 2010-07-21T13:00:39.770 に答える
-1

You can horizontally center a div with:

/*CSS*/
#divtocenter {
    width: 400px;
    margin: 0 auto; /*that's it*/
}
于 2010-07-21T09:41:03.873 に答える