0

我想知道是否有可能从它的父级中浮出一个 DIV ？我有这个使用模板的 PHP CMS。layout.cpl 是所有页面的通用模板。在其中，我有这段代码来显示页面的主体......

<div class="boxmain">Content here</div>

我添加了一个 jQuery 滑块，它只应该出现在某些页面上，因此它位于 boxmain div 内，因为它是父级。滑块的问题是，它应该是一个水平的整页宽度横幅，因此我需要它浮动。如果我不这样做，它会改用“boxmain”div 的 100% 宽度。

我希望我把这一点说清楚，这可能有点令人困惑，但我的基本目标是从它的父 div 中取出一个子 div，以满足滑动横幅的整页宽度。

这是另一个模板中滑块的代码，它基本上显示了其中一个子页面：

<div class="slicebox-wrapper">
    <ul id="sb-slider" class="sb-slider" style="margin-top: -12px; min-width: 100%; max-width: 100%;">
        <li><img src="<?php echo SITE_URL?>/lib/skins/flyeuro/scripts/slicebox/img/ab1.jpg" alt="image1"/></li>
        <li><img src="<?php echo SITE_URL?>/lib/skins/flyeuro/scripts/slicebox/img/ab2.jpg" alt="image2"/></li>
    </ul>   
</div>
4

2 回答 2

0

听起来您希望滑块包含在小于 100% 的东西中时，它是屏幕尺寸的 100%。如果是这样的话，我会强烈反对。将滑块和内容 div 包装在 100% 宽度的包装器中会更实用：

    <div class='mainWrapper'>
        //100% Width Wrapper
        <div class="slicebox-wrapper">
           <ul id="sb-slider" class="sb-slider" style="margin-top: -12px; min-width: 100%; max-width: 100%;">
              <li><img src="<?php echo SITE_URL?>/lib/skins/flyeuro/scripts/slicebox/img/ab1.jpg" alt="image1"/></li>
              <li><img src="<?php echo SITE_URL?>/lib/skins/flyeuro/scripts/slicebox/img/ab2.jpg" alt="image2"/></li>
              </ul> 
        </div>
        //Fixed Width Wrapper
        <div class='content'>

        </div>
  </div>
于 2013-01-08T19:45:26.057 回答
0

我对你的问题有点不清楚，所以我可能是错的，但在我看来，你可能有兴趣从当前 div 中删除元素并将其放置在正文中的其他位置。您可以使用 remove() 和 append()、prepend()、after() 等来更改该 div 在文档中的位置。

您必须在加载滑块时触发该功能才能执行移动。如果页面是静态的，你可以在 $(document).ready 上做。但是，如果您使用 AJAX 加载该 div，请在 HTML 中嵌入一个脚本标记，该标记将在调用该函数的响应中传递。

页：

<body>
    <div class="boxmain">
        <div class="parent">
            <div class="slicebox-wrapper">...</div>
        </div>
    </div>
</body>

jQuery：

jQuery(document).ready(function() {
    jQuery('.slicebox-wrapper').remove().appendTo('.boxmain');
});

将像这样重新组织页面：

<body>
    <div class="boxmain">
        <div class="parent"></div>
        <div class="slicebox-wrapper">...</div>
    </div>
</body>
于 2013-01-08T18:33:16.337 回答