如何圍繞一個div包裹多個div

Question

我有一個div（ Slideshow ），我想在它周圍包裹一些小div（ Items ）。 Slideshow div將是靜態的，並且Items將使用Repeater Control自動呈現。

我制作此圖像是為了更好地說明我需要實現的目標。

我看到了這個問題 ，我想我可以使用相同的邏輯，讓Repeater項目正常顯示，然后使用JavaScript更改標記，並使用某種CSS Grid布局來設置前4個項目的樣式，例如左側和正確，其余將在它們下面，但是我不確定該怎么做，如果有更簡單的解決方案，我認為它比使用我在所提到的問題中看到的概念更干凈。

Update1 ：更改圖片以顯示確切的所需輸出

Answer 1

您可以生成一個石工布局。 該插件可能會有所幫助， 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

Answer 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");    
    }
});