enter image description here 水平和垂直與許多小divs和一個大-div？

我應該如何創建這種結構？我的第一個想法是將四個粉紅色合成一個橙色，所以我得到4pinksVS1orange（現在下一個難題是將它們並排放置，我不知道，確定我知道一些hxcks，但它們很容易被破壞）。然後，拼圖是四個粉紅色的底部行（同樣是並排拼圖）。爲了清楚起見，假設border:0。我不想要任何浮動-hxck，也許position: absolute - 對不起，我不知道。下面你可以找到我如何解決這個問題的方法，但我相信有人可以提出更聰明的想法。

CSS

<!--vim: nowrap:--> 
<style type="css"> 
#body{ 
     width:800px; 
     border:0; 
} 
#yellow{ 
     width:400px; 
} 
<!--ERR: poor reuse? How better?--> 
#pinkFour{ 
     width:400px; 
     height:400px; 
} 
#pinkOne{ 
     width:100px; 
     height:100px; 
} 
/* ERR: poor reuse? How's better? */ 
#concatenatePinkYellow{   
     width:800px; 
     height:400px; 
} 
#pinkRow{ 
     width:800px; 
     height:100px; 
} 
</style>

身體

<body> 
     <div id="concatenatePinkYellow"> 
       <div id="pinkFour"> </div> 
       <!-- HORIZONTAL-VERTICAL SBS --> 
       <div id="yellow"> </div> 
     </div> 
     <div id="pinkRow"> 
       <!--TODO: four pinks here--> 
       <!--HORIZONTAL SBS--> 
       <!--TODO: how to place them side-by-side?--> 
     </div> 
</body>

目標： REUSE！

的例子有佈局

4x4{1x1}4x4{4x4};8x1{1x1}

現在假設我想與橙色盒子佈局在中部和粉紅色框的周圍，怎麼樣？對於後者，它只是：

8x8{1x1};2x1{1x1}2x2{2x2}2x1{1x1};8x8{1x1}

......它不會比那更難嗎？有沒有任何工具可以用上面的語法快速生成不同的幾何圖形？爲了簡單起見，不要關心框中的內容。

來源

2012-03-04 hhh

答案顯然[CSS3網格佈局（http://dev.w3.org/csswg/css3-grid-align/），但它會只在一個瀏覽器中正確渲染，IE10（測試版，只有W8，市場份額爲0.02％）:) – FelipeAls 2012-03-04 10:19:35

你能描述那些彩色盒子裏的內容嗎？它是否是同一類型內容的9倍，其中一個比另一個更大？根據我的經驗，即使對於圖像（它們可以被「@ alt」替換，並且長度可變），「高度」也沒有。這就是爲什麼浮動「爆炸」，當1盒是1px高的原因或另一個......所以有什麼內容？它應該由列表編碼，列表如果可能的話，清單圖像不用擔心容器？ – FelipeAls 2012-03-04 10:25:58

@FelipeAlsacreations：不要擔心內容，我擔心的是*重用*。假設我需要稍微改變佈局，或者我想每天自動生成佈局有點不同。這些盒子每天都是相同的尺寸（或者如果真的需要，可以進行小尺寸的更改）。必須有一些工具來提供最終涵蓋的高級功能，這些想法是否與預覽文件有關？ – hhh 2012-03-04 10:40:28

選中此項。沒有黑客。純粹的CSS。 http://jsfiddle.net/blackpla9ue/9gUP8/

HTML

<ul> 
    <li class="yellow"></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
</ul>

CSS

ul{ 
    width: 240px; 
    padding: 5px; 
} 

li{ 
    width: 50px; 
    height: 50px; 
    display: block; 
    background: pink; 
    float: left; 
    margin: 5px; 
} 

li.yellow{ 
    width: 110px; 
    height: 110px; 
    background: yellow; 
    float: right; 
}

來源

2012-03-04 10:16:16 blackpla9ue

我不知道你可以使用ul | li來代替div嗎？任何想法是否有可能會忽略邊界，並在某種程度上在高層聲明每個盒子都必須在5px \ pm10px -proximity到其他盒子？當我嘗試過這些時，我搞砸了單調的計算 - 以某種方式讓它們變得很酷，例如在身體中使它們像「proximity：5 \ pm10px;」。 – hhh 2012-03-04 10:51:25

你的意思是保持每個盒子之間只有5px的差距嗎？ – blackpla9ue 2012-03-04 11:04:49

靠近，我的意思是*大約* 5px \ pm10px。我並不擔心它是否真的是0-15像素，類似的東西沒問題 - 會使事情變得更簡單，並且在不同的環境下可能更具可重用性。 – hhh 2012-03-04 11:30:38

在 '左' 只是分割你的模板和 '右'：

jsbin demo

#container{ 
    border:1px dashed #444; 
    width:480px; 
    height:360px; 
    } 

    .left{ 
    width:240px; 
    float:left; 
    } 
    .right{ 
    width:240px; 
    float:left; 
    } 
    .pink{ 
    background:#FF2780; 
    width:100px; 
    height:100px; 
    float:left; 
    margin:10px; 
    } 

    .yellow{ 
    width:220px; 
    height:220px; 
    background:#FFC000; 
    float:left; 
    margin:10px; 
    }

。

<div id="container"> 

    <div class="left"> 
    <div class="pink"></div> 
    <div class="pink"></div> 
    <div class="pink"></div> 
    <div class="pink"></div> 
    <div class="pink"></div> 
    <div class="pink"></div> 
</div> 

<div class="right"> 
    <div class="yellow"></div> 
    <div class="pink"></div> 
    <div class="pink"></div> 
    </div> 

</div>

來源

2012-03-04 10:31:52

...我總是搞亂邊界和填充（他們只是一些線性關係到其他昏暗），有沒有一些通用的工具說'每個盒子必須懸停10px或1％-of-XYZ彼此或在一些鄰近'？而不是硬編碼，找到一些在網站上放置多個小盒子和一個大盒子的通用方法會非常有用。 – hhh 2012-03-04 10:43:39

水平和垂直與許多小divs和一個大-div？

回答

jsbin demo

相關問題