如何在div上圍繞多個div

我有一個div（Slideshow），我想圍繞它小型div（Items）。 Slideshow div將是靜態的，並且Items將使用Repeater Control自動呈現。如何在div上圍繞多個div

我製作此圖片以更好地說明我需要達到的目標。

enter image description here

我看到這個Question，我想我可以使用相同的邏輯，讓Repeater項目將正常渲染，然後使用JavaScript更改的標記和使用某種形式的一個CSS網格佈局的樣式第一例如左邊和右邊的4個項目，其餘的將在其下方，但我不知道如何去做，再加上是否有更簡單的解決方案，我認爲它可能比使用我在問題I中看到的概念更清潔提及。

UPDATE1：改變圖片顯示的確切所需的輸出

來源

2015-06-28 lKashef

鏈接的問題在添加父容器到元素的意義上使用「包裝」。但是，你的問題似乎使用了「包裹」，表示圍繞但不包含其他元素的元素。你可以澄清，也許通過包括預期的HTML輸出？ –

您可以生成一個磚石佈局。此插件可能會有所幫助，https://github.com/desandro/masonry

您也可以使用引導列來執行此操作。對於第一行，使用幻燈片顯示，您有3列。外部左側和右側列將有2個嵌套行。 http://getbootstrap.com/examples/grid/。這是我最熟悉的內容，所以我將向您展示如何實現第一行的解決方案以及如何實現第四行的第二行。

<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

來源

2015-06-28 19:41:48

這不是一個真正的答案。它只是建議在哪裏看。 –

我用一個例子編輯了我的答案。 –

這些是靜態實現我的輸出的好方法，但我的項目是從數據庫動態生成的，所以我需要這些項目以動態方式查找佈局。 – lKashef

檢查此解決方案，看看您是否可以採用它到您的項目：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");  
    } 
});

來源

2015-06-28 22:06:51 DRD

如何在div上圍繞多個div

回答

相關問題