Question

我有一个包含我内容的容器，我正在使用sideBar作为我的链接。默认情况下，侧栏将其放在页面的一侧。所以我编辑了css，将它移动到名为container的div旁边。但如果人们使用不同的分辨率，它就会抛弃它。

第一个div是侧边栏，第二个是容器。我试过了

<script>
$("sideBar").position({
 my: "center",
 at: "left bottom",
 of: $("container"),
})
</script>

并没有发生任何事情

   <script>
$j("sideBar").position({
 my: "center",
 at: "left bottom",
 of: "#container",
})
</script>

<div id="sideBar">

    <a href="#" id="sideBarTab"><img src="sidebar/images/slide-button-active.gif" alt="sideBar" title="sideBar"></a>

    <div id="sideBarContents" style="opacity: 0.80;">
        <div id="sideBarContentsInner">
            <h2>side<span>bar</span></h2>

        <ul>
            <li><a href="#" onclick="goto('home');return false;">Link One</a></li>
            <li><a href="#" onclick="goto('connect');return false;">Link Two</a></li>
            <li><a href="#" onclick="goto('contact');return false;">Link Three</a></li>
            <li><a href="#">Link Four</a></li>
            <li><a href="#">Link Five</a></li>
        </ul>

    </div>
</div>

<div id="container">
        <div style="height: 548px;" id="door"  onclick="openclose()">
    </div>
        <div id="nav" style="display: none;">
            <a href="#" id="social_" class="selected" onmouseover="hover(this)" onmouseout="out(this)" onclick="goto('social');return false;"><span id="social_hov" style=""></span></a>
            <a class="" href="#" id="connect_" onmouseover="hover(this)" onmouseout="out(this)" onclick="goto('connect');return false;"><span id="connect_hov" style="display: none;"></span></a>
            <a class="" href="#" id="contact_" onmouseover="hover(this)" onmouseout="out(this)" onclick="goto('contact');return false;"><span id="contact_hov" style="display: none;"></span></a>
            <a class="" href="http://wordpress.thechrismission.com/" target="_blank" id="portfolio_" onmouseover="hover(this)" onmouseout="out(this)"><span id="portfolio_hov" style="display: none;"></span></a>
        </div>

    <div id="social" style="display: none;">
        <div id="subheader">
                <div id="header" class="social"></div>
        </div>
        <div id="content">
                <div id="list">
                    <a href="http://twitter.com/heychrishanna" target="_blank">twitter<span>twitter.com/heychrishanna</span><b class="icon twitter"></b></a>
                    <a href="http://www.facebook.com/ChristopherHanna" target="_blank">facebook<span>facebook.com/ChristopherHanna</span><b class="icon fb"></b></a>

                </div>
        </div>

Answer 1

您的脚本可能在DOM准备好之前运行。您在元素标识符之前也缺少#个字符。尝试：

<script type="text/javascript">
    $(document).ready(function() {
        $("#sideBar").position({
            my: "center",
            at: "left bottom",
            of: "#container"
        });
    });
</script>

Answer 2

如果你的div有id =“sideBar”或id =“container”那么你需要用$（“＃sideBar”）和$（“container”）替换$（“sideBar”）和$（“＃container “）

如果您使用的是class =“..那么它是$（”。sideBar“）..等等

Answer 3

您的语法略有偏差。它应该是：

<script>
$("#sideBar").position({
 my: "center",
 at: "left bottom",
 of: "#container",
})
</script>

Answer 4

你应该只使用CSS来实现这一点。查看floats您对div的定位，并注意如果div的组合宽度（包括边距和边框）超过父容器的宽度，则div将换行到下一行。

两个div彼此相邻。 JQUERY

4 个答案: