Question

首先，如果这不是提出这个问题的正确位置，我会道歉。我只是不知道Q / A的任何其他来源。

我有一个大学项目，我必须提交this Site的精确副本，以便通过我的网络开发实践。

我设法复制了所有内容，只剩下剩下的就是hexagonal grid。

如果有人可以访问该网站，则可以看到number of hexagons per row changes according to width of browser window。

这是我的网格代码
CSS和HTML

＆＃13;

.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%);
}

＆＃13;

<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>

＆＃13;

现在我管理的网格看起来有点像他们的全宽。但 如何才能使其响应？并根据宽度改变每行六边形的数量？ 我也试过阅读他们的源代码，但除了他们使用<br>来完成这个技巧之外我无法弄清楚这个技巧但是我无法管理。

如果有人可以指出我正确的方向并且分享任何学习高级CSS的资源，那将非常感激。非常感谢大家的时间。

我已经尝试过来自this thread的解决方案，但我正在寻找的解决方案是像builtbybuffalo.com那样使用<div> <br>和东西，而不是<ul><li>。

Answer 1

这基本上是您的标准圆柱布局，带有修改过的换行元素。（他们为此使用br，但它可以是具有正确样式的任何元素。）有一些断点，单元格上的类的样式和破坏元素根据哪个断点是变化的用过的。请注意，break元素位于行需要断开的位置，并且在它们上设置的类控制哪个断点使用该断开元素。

他们并没有像现在这样将它们分组成行;基本上只有一行元素，带有精心放置的断开元素，根据哪个断点处于活动状态而显示/隐藏。

Answer 2

您可以编写媒体查询以使其具有响应性。您可以为不同的屏幕尺寸指定不同的样式，以便UI根据屏幕大小进行修改。例如，

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

像builtbybuffalo.com

2 个答案: