4
우선이 질문을할만한 곳이 아니라면 사과드립니다. Q/A에 대한 다른 정보원을 모르겠습니다.builtbybuffalo.com과 같은 육각형 그리드 만들기
저는 웹 개발자에게 실질적인 패스를 제공하기 위해 this Site의 정확한 복제본을 제출해야하는 대학 프로젝트가 있습니다.
나는 모든 것을 복사 할 수 있으며 남은 것은 hexagonal grid입니다.
누군가가 사이트를 방문 할 수 있다면 number of hexagons per row changes according to width of browser window을 볼 수 있습니다.
여기
.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>CSS에 대한 코드와 HTML입니다. 하지만 어떻게 대응할 수 있습니까? 폭에 따라 행 당 육각형 수를 변경합니까? 나는 그들의 소스 코드도 읽으려고했지만 트릭을하기 위해
<br>을 사용하고 있다는 것을 제외하고는 속임수를 알 수는 없었다. 그러나 나는 단지 관리 할 수 없다.
누군가가 올바른 방향으로 나를 가리킬 수 있고 이와 같은 고급 CSS를 배우기위한 소스를 공유 할 수 있다면 정말 감사 할 것입니다. 많은 분들께 감사드립니다.
는 이미 this thread에서 해결책을 시도했지만 내가 무엇을 찾고있어 <div> <br> 및 구성 요소,하지 <ul><li>를 사용하여, 단지 builtbybuffalo.com들처럼 할 수있는 솔루션입니다했습니다.
는 잘 모르겠지만, 어쩌면 그들은이 육각형 격자 레이아웃을 만들기 위해 플러그인을 사용했을 것입니다. 유사한 레이아웃의 데모가 있습니다. 아마도 도움이 될 것입니다. http://stackoverflow.com/questions/26114920/responsive-grid-of-hexagons –
http://codepen.io/gc-nomade에서 살펴볼 수 있습니다./펜/eyntg, 한 번 stackoverflow에 대한 비슷한 질문에 대한 데모했다. –
@TeutaKoraqi 그들은 플러그인을 사용하고 있지 않다. 나는 그 Hexagon 그리드의 CSS와 HTML만을 복사했고, 어떤 jQuery/Javascript도없이 작동했다. :) –