个人中心
文章发布
退出
作者热门文章
- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
25
4
首先，如果这不是问这个问题的合适地方，我深表歉意。我只是不知道 Q/A 的任何其他来源。
我有一个大学元素，我必须在其中提交 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 中的解决方案但我正在寻找的是一个解决方案，就像 builtbybuffalo.com 的家伙一样，使用 <div> <br>和东西，不是<ul><li> .
最佳答案
这本质上是您的标准分栏布局，带有经过修改的换行元素。 (他们为此使用 br，但它可以是具有正确样式的任何元素。)有一些断点，单元格上的类样式和中断元素会根据使用哪个断点。请注意，中断元素位于行需要中断的位置，并且在其上设置的类控制哪个断点使用该中断元素。
他们不会像您一样将它们分组；基本上只有一行元素，其中精心放置了根据激活的断点显示/隐藏的中断元素。
关于html - 像 builtbybuffalo.com 一样制作六边形网格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41324111/
25
4
0
首先，如果这不是问这个问题的合适地方，我深表歉意。我只是不知道 Q/A 的任何其他来源。 我有一个大学元素，我必须在其中提交 this Site 的精确副本用于通过我的网络开发实践。 我已经设法复制了
我是一名优秀的程序员,十分优秀！