4
まず、この質問をするのが適切でない場合は、お詫び申し上げます。私はQ/Aのための他の情報源を知りません。六角形のグリッドをbuiltbybuffalo.comのようにする
私はthis Siteの正確なレプリカを提出しなければならない大学のプロジェクトがあります。私のウェブデベロッパーを実践的に渡すためです。
私はすべてをコピーできましたが、残っているものは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からソリューションを試みたが、私が探している<div> <br>と詰め込むを使用して、ちょうどbuiltbybuffalo.comの男のようにそれを行うための解決策ではなく、<ul><li>できました。
、UIが画面size.For例に従って修正するように、それはresponsive.Youが異なる画面サイズごとに異なるスタイルを指定することができます作るためにメディアクエリを記述することができますが、おそらく彼らはこの六角形のグリッドレイアウトを構築するためのプラグインを使用しました。ここでは同様のレイアウトのデモですが、おそらくそれはあなたを助けるかもしれません：http://stackoverflow.com/questions/26114920/responsive-grid-of-hexagons –
http://codepen.io/gc-nomade/pen/eyntg、それはかつてstackoverflowに関する似たような質問のデモでした。 –
@TeutaKoraqiいいえ、彼らはプラグインを使用していません、私はそのHexagonグリッドのCSSとHTMLだけをコピーし、jQuery/Javascriptなしで動作しました:) –