網格樣式佈局

我基本上想使用CSS和HTML來定位元素，以便它們佔據它們適合的任何空間。所以我有一個網格狀結構，元素堆疊得很好。問題是我無法在小盒子旁邊裝滿小盒子。例如http://jsfiddle.net/9pk4J/1/網格樣式佈局

HTML：

<section id="cubes"> 
    <div> 
      <article class="large"></article> 
     </div> 
    <div> 
      <article></article> 
     </div> 
     <div> 
      <article></article> 
     </div> 
     <div> 
      <article></article> 
     </div> 
     <div> 
      <article></article> 
     </div> 
     <div> 
      <article></article> 
     </div> 
     <div> 
      <article></article> 
     </div> 
     <div> 
      <article></article> 
     </div> 
</section>

CSS：

#cubes { 
font-size:0; 
position: absolute; 
    max-width:670px; 
} 
#cubes div { 
display:inline-block; 
padding:3px; 
} 
#cubes div article.large { 
cursor:pointer; 
display:inline-block; 
height:300px; 
width:492px; 
background-color:rgba(0,0,0,0.5); 
overflow:hidden; 
} 
#cubes div article { 
cursor:pointer; 
display:inline-block; 
height:150px; 
width:160px; 
background-color:rgba(0,0,0,0.5); 
overflow:hidden; 
}

我知道有，我能說出具體的元素和使用絕對定位把他們在地方的方法，但最好我想讓他們適合垂直和水平使用只是CSS和HTML的地方。

來源

2013-06-03 E.Cross

你看過http://masonry.desandro.com/嗎？ – j08691

我同意@Luis說砌體可能是一個更好的選擇，但如果你可以修復框的寬度和大小，你可以用直接的CSS來完成。如果你總是先有1個大盒子，然後是幾個小盒子，那麼在你所有的divs上只需要float:left，你就很好。如下圖所示：

http://jsfiddle.net/9pk4J/2/

來源

2013-06-03 21:18:55

這工作，很酷謝謝:) –

我會推薦使用一個插件，Masonry這是它的名字，你可以檢查它的頁面。

有一個版本jQuery和另一隻CSS（ '香草版'）

這裏有一個現場演示，你以前的小提琴http://jsfiddle.net/9pk4J/5/

HTML標記

<section id="cubes"> 
    <div class="box"> 
     <article class="large"></article> 
    </div> 
    <div class="box"> 
     <article></article> 
    </div> 
    <div class="box"> 
     <article></article> 
    </div> 
    <div class="box"> 
     <article></article> 
    </div> 
    <div class="box"> 
     <article></article> 
    </div> 
    <div class="box"> 
     <article></article> 
    </div> 
    <div class="box"> 
     <article></article> 
    </div> 
    <div class="box"> 
     <article></article> 
    </div> 
</section>

JS標記

$('#cubes').masonry({ 
    itemSelector: '.box', 
    columnWidth: 100, 
    isAnimated: true 
});

Jquery Masonry

Vanilla Masonry

希望它能幫助！

來源

2013-06-03 21:16:13 Luis

這似乎很整潔，但我不喜歡他們使用的例子有多混亂。在我看來，像砌體這樣的東西可以更好地用於由大多數純色塊組成的物品（類似於Metro，現在我認爲它），因爲擁有不均勻分佈的繁忙區塊可能會使眼睛迷失方向並且使界面更難以使用，即使它看起來很漂亮。（我指的是一次使用多個小塊，當它只有2或3個大塊時，或者只是在1〜2列的頁面上向下流時，它看起來仍然有點繁忙，但比前端更容易遵循，第一頁）。 – JAB

@JAB我同意，它可以使你的整個界面變得混亂，我想這只是取決於他們將如何使用它... – Luis

那麼它應該有可能與CSS flexible boxes但browser support is not great（IE10 +僅爲例），但Chrome和Firefox有模型很好的支持。

使用CSS flexbox builder，我設法創建了一個small demo（僅在Chrome 29中測試過）盒子如何渲染，但有很多選項可以自定義輸出。儘管如此，你可能會發現它們的盒子仍然不能正確流動，但仍然有一些東西可以播放。

對不起，代碼有點混亂，我直接從構建器頁面中解除它！

<div class="visual"> 
    <div class="box" ng-style="model | vendorPrefix" ng-class="{hover:hoverContainer}" style="-webkit-flex-flow: column wrap; -webkit-justify-content: flex-start; -webkit-align-content: flex-start; -webkit-align-items: flex-start;"> 
    <div class="ng-scope ng-binding" style="-webkit-order: 1; -webkit-flex: 0 1 auto; -webkit-align-self: auto; min-width: 150px; min-height: 150px;">A</div> 
    <div class="ng-scope ng-binding" style="-webkit-order: 2; -webkit-flex: 0 0 50px; -webkit-align-self: auto; min-width: 50px; min-height: 50px;">B</div> 
    <div class="ng-scope ng-binding" style="-webkit-order: 2; -webkit-flex: 0 0 50px; -webkit-align-self: auto; min-width: 50px; min-height: 50px;">C</div> 
    <div class="ng-scope ng-binding" style="-webkit-order: 2; -webkit-flex: 0 0 50px; -webkit-align-self: baseline; min-width: 50px; min-height: 50px;">D</div> 
    <div class="ng-scope ng-binding" style="-webkit-order: 2; -webkit-flex: 0 0 50px; -webkit-align-self: auto; min-width: 50px; min-height: 50px;">E</div> 
    </div> 
</div>

來源

2013-06-03 21:42:31 andyb

我認爲你的例子會更容易檢查如果你從標記中分離了樣式。 – JAB

網格樣式佈局

回答

相關問題