时间戳

首页 > 解决方案 > 无论窗口大小如何，使图像适合同一行

html - 无论窗口大小如何，使图像适合同一行

问题描述

.pinkDiv {
  position: relative;
  width: 100%;
  height:290px;
  background-color: pink;
}

.miniDiv{
  width: calc(100%*100/893);
  background-color: green;
  float:left;
}

.maxiDiv {
    width: calc(100%*93/893);
    background-color: green;
    float:left;
}



img{
  width: 100%;
  height: auto;
  margin-top: 174px;
  float:left;

}

#queen {
  margin-top: 75px;
}
<div class="pinkDiv">
      <div class ="miniDiv">
        <img src="./Images/pawn.png" style=" width:100%;">
      </div>
      <div class ="miniDiv">
        <img src="./Images/pawn.png" style="width:100%">
      </div>
      <div class ="miniDiv">
        <img src="./Images/pawn.png" style="width:100%">
      </div>
      <div class ="miniDiv">
        <img src="./Images/pawn.png" style="width:100%">
      </div>
      <div class ="maxiDiv">
        <img src="./Images/kwin.png" style="width:100%" id = "queen">
      </div>
      <div class ="miniDiv">
        <img src="./Images/pawn2.png" style="width:100%">
      </div>
      <div class ="miniDiv">
        <img src="./Images/pawn2.png" style="width:100%">
      </div>
      <div class ="miniDiv">
        <img src="./Images/pawn2.png" style="width:100%">
      </div>
      <div class ="miniDiv">
        <img src="./Images/pawn2.png" style="width:100%">
      </div>
</div>

我连续放置了大约 7 个 div，每个 div 都有一个背景颜色为绿色的图像。在我的笔记本电脑上，该行在左侧对齐。当我缩小窗口大小时，图像会排成一行。随着窗口大小变得更窄，一些图像堆积在第一个堆栈的底部。无论窗口大小如何，如何让所有图像保持连续？ 我附上了三个屏幕截图，每个屏幕截图分别解释了上述场景。

编辑：水平问题已在评论部分的指导下得到解决。这造成了在调整窗口大小时图像垂直失真的另一个问题。

标签： htmlcsslayoutstylingwindow-resize

解决方案

像这样的东西？您缺少的关键元素是width: calc(100%/7);只需将它放在您希望它恰好位于窗口或容器的 7 分之一的位置。

div.blue {
  height: 30px;
  width: calc(100%/7);
  background-color: blue;
  float: left;
}
div.green {
  height: 30px;
  width: calc(100%/7);
  background-color: green;
  float: left;
}
<div class = "green"></div>
<div class = "blue"></div>
<div class = "green"></div>
<div class = "blue"></div>
<div class = "green"></div>
<div class = "blue"></div>
<div class = "green"></div>

推荐阅读