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

【问题标题】：Making the images fit in the same row regardless of window size无论窗口大小如何，使图像适合同一行
【发布时间】：2019-12-24 13:28:57
【问题描述】：

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

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

【问题讨论】：

从屏幕截图中可以看出，使用 CSS 框架（我认为 Bulma.io 非常适合您的需要）而不是手动编写 CSS 似乎是可行的。
你为什么不使用引导程序？？？
提问时，有一个按钮可以让你添加一个sn-p。当您提出问题时，它会变得非常容易，因为首先它可以让您检查您发送给我们的版本是否真的有效。其次，我们可以直接编辑它，而不是从头开始重新创建它。
@roshnet 谢谢！我是 CSS 新手，所以我想当我设法理解这一点时我会研究一下：D 谢谢你的建议
@JonathonPhilipChambers 谢谢你告诉我！！我知道必须有一个更简单的方法......今天刚刚注册了堆栈溢出！

标签： html css layout styling window-resize

【解决方案1】：

这样的？您缺少的关键元素是 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>

【讨论】：

评论不用于扩展讨论；这个对话是moved to chat。

【解决方案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;
}

【讨论】：