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，每个图像都带有绿色的背景色。在我的笔记本电脑上，该行在左侧对齐。当我缩小窗口大小时，图像合为一行。随着窗口尺寸变得越来越窄，一些图像会堆积在第一叠的底部。无论窗口大小如何，如何使所有图像连续显示？ 我已附加了三个屏幕截图，每个屏幕截图分别说明了上述情况。

编辑：水平问题已在注释部分的指导下解决。这在调整窗口大小时又产生了图像垂直失真的问题。

Answer 1

像这样？您缺少的关键元素是width: calc(100%/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;
}

不管窗口大小如何，使图像适合同一行

2 个答案: