无论 window 大小如何，使图像适合同一行

Question

.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 都是背景色为绿色的图像。在我的笔记本电脑上，该行在左侧对齐。当我缩小 window 大小时，图像适合一行。随着 window 尺寸变得更窄，一些图像堆积在第一个堆栈的底部。无论 window 大小如何，如何让所有图像保持连续？ 我附上了三张截图，分别解释了上述场景。

编辑：水平问题已通过评论部分的指导得到解决。这在调整 window.

大小时造成了图像垂直失真的另一个问题

Answer 1

是这样的吗？您缺少的关键元素是 width: calc(100%/7); 只需将其放在您希望它正好是 window 或容器的第 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>

Answer 2

简单的响应版本。

<div class="pinkDiv">
  <div class="miniDiv">
    <img src="./Images/pawn.png">
  </div>
  <div class="miniDiv">
    <img src="./Images/pawn.png">
  </div>
  <div class="miniDiv">
    <img src="./Images/pawn.png">
  </div>
  <div class="miniDiv">
    <img src="./Images/pawn.png">
  </div>
  <div class="miniDiv">
    <img src="./Images/kwin.png" id="queen[![enter image description here][1]][1]">
  </div>
  <div class="miniDiv">
    <img src="./Images/pawn2.png">
  </div>
  <div class="miniDiv">
    <img src="./Images/pawn2.png">
  </div>
  <div class="miniDiv">
    <img src="./Images/pawn2.png">
  </div>
  <div class="miniDiv">
    <img src="./Images/pawn2.png">
  </div>
</div>

CSS块。

.pinkDiv {
  background-color: #FFC0CB;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.miniDiv {
  display: inline-block;
  width: 10%;
  padding: 0;
}

img {
  width: 100%;
  height: auto;
}

无论 window 大小如何，使图像适合同一行

Making the images fit in the same row regardless of window size

html

css

layout

styling

window-resize