如何将多个 div 包裹在一个 div 周围答案

【问题标题】：How to wrap more than one div around a div如何将多个 div 包裹在一个 div 周围
【发布时间】：2015-06-29 06:06:51
【问题描述】：

我有一个 div (Slideshow)，我想用小 div (Items) 包裹它。 Slideshow div 将是静态的，Items 将使用 Repeater Control 自动呈现。

我制作这张图片是为了更好地说明我需要实现的目标。

我看到了Question，我想我可以使用相同的逻辑，让Repeater 项目正常呈现，然后使用 JavaScript 更改标记并使用某种 CSS 网格布局来设置前 4 个项目的样式例如在左侧和右侧，其余的将在它们下方，但我不知道该怎么做，如果有更简单的解决方案，我认为它可能比使用我在我提到的问题中看到的概念更清洁。

Update1：更改图片以显示所需的确切输出

【问题讨论】：

链接的问题在将父容器添加到元素的意义上使用“包装”。但是您的问题似乎在围绕但不包含另一个元素的元素的意义上使用“包装”。您能否澄清一下，也许包括预期的 HTML 输出？

标签： javascript c# css asp.net grid-layout

【解决方案1】：

您可以生成 Masonary 布局。这个插件可能有帮助，https://github.com/desandro/masonry

您也可以使用引导列来做到这一点。对于幻灯片的第一行，您有 3 列。外部左列和右列将有 2 个嵌套行。 http://getbootstrap.com/examples/grid/。这是我最熟悉的，所以我将向您展示如何为第一行实现解决方案以及如何实现具有 4 列的第二行。

<div class="row">

    <!-- Outer Left Column -->
    <div class="col-xs-4">
        <div class="row">
            <div class="col-xs-12">
                Item
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                Item
            </div>
        </div>
    </div>

    <div class="col-xs-12">
        Slide Show
    </div>

    <!-- Outer Right Column -->
    <div class="col-xs-4">
        <div class="row">
            <div class="col-xs-12">
                Item
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                Item
            </div>
        </div>
    </div>

</div>

<!-- Row With Four Items -->
<div class="row">
    <div class="col-xs-3">
        Item
    </div>
    <div class="col-xs-3">
        Item
    </div>
    <div class="col-xs-3">
        Item
    </div>
    <div class="col-xs-3">
        Item
    </div>
</div>

检查角度材料布局系统。不过，这将更难实现，因为它需要 Angular。 https://material.angularjs.org/latest/#/layout/grid

【讨论】：

这不是一个真正的答案；这只是关于在哪里看的建议。
这些是静态实现我的输出的好方法，但我的项目是从数据库动态生成的，所以我需要这些项目动态地找到它们进入布局的方式。
你可以用 javascript 做到这一点。使用document.createElement 生成元素。您还可以获取一个元素并为其添加一个类名document.getElementById('foo').className += ' class_two'

【解决方案2】：

查看此解决方案，看看您是否可以将其应用于您的项目：http://jsfiddle.net/1b0hoked/。

HTML：

<div id = "wrapper">
    <div id = "slideshow"></div>
</div>

CSS：

*, :before, :after {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

body {
    padding: 10px;
}

#wrapper {
    counter-reset: item-counter;
    text-align: right;
    margin: 0 auto;
    display: table;
    outline: 1px solid gray;
    position: relative;
}

#slideshow {
    width: 210px;
    height: 210px;
    line-height: 210px;
    text-align: center;
    border: 2px solid red;
    position: absolute;
    top: 5px;
    left: 50%;
    margin-left: -105px;
}

#slideshow:before {
    content: "Slide Show";
    vertical-align: middle;
    font: bold 16px/1 Sans-Serif;
    color: red;
}

.item {
    height: 100px;
    width: 100px;
    text-align: center;
    line-height:  96px;
    border: 2px solid #aaa;
}

.item:before {
    counter-increment: item-counter;
    content: "item " counter(item-counter);
    vertical-align: middle;
    font: bold 12px/1 Sans-Serif;
    color: #aaa;
}

.item {
    float: left;
    margin: 5px;
}

.item:nth-of-type(4n + 1) {
    clear: left;
}

.item:nth-of-type(3) {
    float: right;
    margin-top: -105px;
}

.item:nth-of-type(4) {
    float: right;
    clear: right;
    margin-left: -105px;
}

.item:nth-of-type(2) {
    clear: left;
}

JS/jQuery:

$(function() {
    var numToAdd = 50;
    while(--numToAdd >= 0) {
        $("</p>").addClass("item").appendTo("#wrapper");    
    }
});

【讨论】：