2016-12-25 47 views
4

首先,我很抱歉,如果這不是正確的地方問這個問題。我只是不知道Q/A的其他來源。製作六邊形網格就像在builtbybuffalo.com

我有一個大學項目,其中我必須提交this Site的確切副本,以通過我的web開發實用。

我已經設法複製一切,只有剩下的東西是hexagonal grid

如果有人可以訪問該網站,他們可以看到number of hexagons per row changes according to width of browser window

這裏是我的網格
CSS代碼和HTML

.container { 
 
    margin-top: 120px; 
 
} 
 
.hex-3-row { 
 
    display: table; 
 
    margin: 30px auto; 
 
} 
 
.hex { 
 
    display: inline-block; 
 
    width: 190px; 
 
    height: 110px; 
 
    color: white; 
 
    background-color: red; 
 
    position: relative; 
 
    margin-left: 15px; 
 
    z-index: 110; 
 
    text-align: center; 
 
    line-height: 110px; 
 
} 
 
.hex::after { 
 
    content: ""; 
 
    background-color: red; 
 
    height: 110px; 
 
    width: 190px; 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    transform: rotate(60deg); 
 
    z-index: -1; 
 
} 
 
.hex::before { 
 
    content: ""; 
 
    background-color: red; 
 
    height: 110px; 
 
    width: 190px; 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    transform: rotate(-60deg); 
 
    z-index: -1; 
 
} 
 
img { 
 
    position: relative; 
 
    height: 150px; 
 
    width: 150px; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
}
<html> 
 

 
<head> 
 
    <title>hexagon</title> 
 
    <link rel="stylesheet" href="css.css"> 
 
</head> 
 

 
<body> 
 

 
    <div class="container"> 
 
    <div class="hex-3-row"> 
 
     <div class="hex"> 
 
     <img src="arrow.png" alt="image"> 
 
     </div> 
 

 
     <div class="hex"> 
 
     <img src="arrow.png" alt="image"> 
 
     </div> 
 

 
     <div class="hex"> 
 
     <img src="arrow.png" alt="image"> 
 
     </div> 
 
    </div> 
 

 
    <div class="hex-3-row"> 
 
     <div class="hex"> 
 
     <img src="arrow.png" alt="image"> 
 
     </div> 
 

 
     <div class="hex"> 
 
     <img src="arrow.png" alt="image"> 
 
     </div> 
 

 
     <div class="hex"> 
 
     <img src="arrow.png" alt="image"> 
 
     </div> 
 

 

 
     <div class="hex"> 
 
     <img src="arrow.png" alt="image"> 
 
     </div> 
 

 
    </div> 
 

 
    <div class="hex-3-row"> 
 
     <div class="hex"> 
 
     <img src="arrow.png" alt="image"> 
 
     </div> 
 

 
     <div class="hex"> 
 
     <img src="arrow.png" alt="image"> 
 
     </div> 
 

 
     <div class="hex"> 
 
     <img src="arrow.png" alt="image"> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 

 

 

 

 
</body> 
 

 
</html>

現在我所管理的網格看上去有點像他們在全寬。 但是我該如何使其響應?根據寬度更改每行六邊形的數量? 我試圖閱讀他們的源代碼,但無法弄清楚除了他們使用<br>做的伎倆,但我不能管理。

如果有人能指出我正確的方向,並分享任何學習高級CSS的源代碼,我將非常感激。 非常感謝大家爲你的時間。

我已經嘗試了this thread的解決方案,但我正在尋找的解決方案就像builtbybuffalo.com傢伙一樣,使用<div> <br>和東西,而不是<ul><li>

+3

我不知道,但也許他們使用一個插件來構建這個六邊形網格佈局。這裏是與類似的佈局演示,也許它可以幫助你:http://stackoverflow.com/questions/26114920/responsive-grid-of-hexagons –

+0

你可以看看http://codepen.io/gc-nomade/pen/eyntg,它曾經是一個演示類似的問題在這裏在stackoverflow。 –

+0

@TeutaKoraqi不,他們沒有使用插件,我複製了該Hexagon網格的CSS和HTML,並且它沒有任何jQuery/Javascript :) –

回答

1

這實質上是您的標準圓柱形佈局,帶有修改後的行斷裂元素。 (爲此,它們使用br,但它可以是具有正確樣式的任何元素。)有幾個斷點,單元格上類的樣式和斷點元素根據使用哪個斷點而更改。請注意,中斷元素位於行需要中斷的位置,並且在其上設置的類控制哪個斷點使用該中斷元素。

他們不會像你一樣將它們分組成行;基本上只有一行元素與仔細放置的中斷元素顯示/隱藏取決於哪個斷點處於活動狀態。

+0

是的,我看到他們正在使用一行元素。我也嘗試過,但是我面對的問題是**在單行中我無法給出餘量,即正確放置元素,因爲它們是內聯元素**。請介紹一下示例代碼,如果不是太麻煩? :) –

+1

在Buffalo頁面中,他們使用'body'上的'text-align:center'來獲得六角對齊。他們還有一個透明的填充元素,用於最終行的末尾,在必要時以與破壞元素相同的方式隱藏起來。我已經使用相同的技術在這裏構建了一個簡化示例(https://jsfiddle.net/wzkbrhhL/)。在662px處只有一個斷點。大多數與此相關的東西都是朝向CSS的底部。他們使用的技術不是通用的,而是被調整爲頁面的內容。 – Ouroborus

+0

是的,我試過了。我從來不知道'text-align:center'可以用來對齊'text'以外的東西。 :) –

1

你可以寫媒體的質疑做出這樣的UI根據屏幕size.For例如修改它responsive.You可以指定不同的屏幕尺寸不同的風格,

@media screen and (max-width: 768px) { 
.container{ 
width:500px; 
} 
} 
+0

是的,我已經嘗試過,但只是改變容器的大小,我無法獲得所需的行爲。 –

+0

你可以參考這個鏈接https://codepen.io/gpyne/pen/iElhp。 –