我的css块看起来不适应不同大小的分辨率

Question

我需要制作3个div块，高度和宽度为200px，位于屏幕中央。它应该与不同的分辨率正确看起来。 它在我的笔记本电脑上看起来不错，但如果我查看其他分辨率，那么其中一个<div class="koostooblock" style=" width:55%; margin:auto;"> <div class="kt1" style="width:200px; height:200px; float:left; margin-right:1px; background:url(images/disaineritedele.png);"><p>Disaineritedele</p></div> <div class="kt2" style="width:200px; height:200px; float:left; margin-right:1px; background:url(images/ehitajatedele.png);"><p>Ehitajatedele</p></div> <div class="kt3" style="width:200px; height:200px; float:left; background:url(images/arhitekroritedele.png);"><p>Arhitekroritedele</p></div> </div> 也在其他分辨率下。对不起我的语言，不是原生语言。

这是我的代码：

{{1}}

Answer 1

很少有东西，尝试使用CSS样式表作为更好的做法。

使用<ul id="grid"> <li class="hexagon"> <div class="inside"> <a class="link" href="#"> <img src="" alt="" /> <h1>Title</h1> <p>Author Name</p> </a> </div> </li> <li class="hexagon"> <div class="inside"> <a class="link" href="#"> <img src="" alt="" /> <h1>Title</h1> <p>Author Name</p> </a> </div> </li> </ul>为每个宽度获得相等的宽度，2px是边距，因为您有两个边距指定为1px，因此总共为2px。

使用媒体查询更新了移动屏幕尺寸：

（注意：在CSS代码顺序很重要，所以如果你在顶部有媒体查询它将无法正常工作，请记住）

width: calc((100% - 2px)/3);

/* mobile screen size */
@media (max-width: 768px) {
  .kt1, .kt2, .kt3 {
    width: calc(100% - 1px);
  }
}

.kt1 {
  width: calc((100% - 2px)/3);
  height: 200px;
  float: left;
  margin-right: 1px;
  background: url(images/disaineritedele.png);
  background-color: yellow;
}

.kt2 {
  width: calc((100% - 2px)/3);
  height: 200px;
  float: left;
  margin-right: 1px;
  background: url(images/ehitajatedele.png);
  background-color: lightgreen;
}

.kt3 {
  width: calc((100% - 2px)/3);
  height: 200px;
  float: left;
  background: url(images/arhitekroritedele.png);
  background-color: aqua;
}

.koostooblock {
  width: 55%;
  height: 100vh;
  margin: auto;
  background-color: lightgray;
}

/* mobile screen size */
@media (max-width: 768px) {
  .kt1, .kt2, .kt3 {
    width: calc(100% - 1px);
  }
}