Question

在我更换图片之前，图片的位置是相同的。

These are the position of the pictures with the old photos

This is the position with the new photos

.column-2 {
  float: left;
  width: 33.3%;
  padding: 5px;
  padding-right: 30px;
  display: inline-block;
}

.column-3 {
  float: right;
  width: 30%;
  display: inline-block;
  padding-right: 30px;
  padding
}

.section-team {
  text-align: center;
}

.members {
  border-radius: 50%;
}

.upm {
  padding-top: 25px;
  padding-right: 5px;
}

<section class="section-team" id="team">
  <div class="row">
    <h2>team members</h2>
  </div>
  <div class="column-2">
    <img src="img/Picture1.jpg" class="members" alt="members" style="width:50%">
    <h3>Adam</h3>
  </div>
  <div class="column-2">
    <img src="img/Picture2.jpg" class="members" alt="members" style="width:50%">
    <h3>Adam</h3>
  </div>
  <div class="column-2">
    <img src="img/Picture3.jpg" class="members" alt="members" style="width:50%">
    <h3>Adam</h3>
  </div>
  <div class="column-2">
    <img src="img/Picture5.jpg" class="members" alt="members" style="width:50%">
    <h3>Adam</h3>
  </div>
  <div class="column-2">
    <img src="img/Picture4.png" class="members" alt="members" style="width:50%">
    <h3>Adam</h3>
  </div>
  <div class="column-2">
    <img src="img/Picture6.jpg" class="members" alt="members" style="width:50%">
    <h3>Adam</h3>
  </div>
  <div class="column-3">
    <img src="img/upm.jpg" class="upm" alt="upm" style="width:30%">
    <h4>Partnered with UPM</h4>
  </div>

我希望有人能告诉我如何像第一张照片中那样定位当前照片。

Answer 1

问题是您没有像对待容器那样对待div。 “ .column-2”和“ .column-3”不应由图像占用多少空间来定义，而应由容纳图像的东西占用多少空间来定义。

要解决此问题，您需要使用基于calc（）的宽度来填充填充。如果容器具有35px的填充，则需要从容器的宽度中减去该填充，以确保在排除非相对测量值后，它们的总和为100％。其次，.column-3如果是行中的唯一列，则需要基于100％的宽度。

第三个建议（尽管并不是使该脚本正常工作所必需的）是重构您的列。这些类不会非常可重用，因此要确保您可以在其他地方使用这些相同的类，则需要执行以下操作：大多数主题都支持最大列数（通常为12），因此您可以命名每个列类的名称取决于元素将占据这12列中的多少列。由于您希望.column-2为一行的1/3，因此将其命名为.column-4，并且由于您希望.column-3为整行，因此将其命名为.column-12。您可以根据需要为所有其他部门创建其他类。您还应该标准化列的行为，以便它们都使用相同的浮点数和填充，并且仅使用子元素为其赋予其独特的属性。

.column-4 { /* was column-2 */
  float: left;
  box-sizing: border-box; /* includes padding as part of width */
  width: 33.3%; 
  display: inline-block;
  padding: 5px;
  padding-right: 30px;
}

.column-12 { /* was column-3 */
  float: left; /* made the same as column-4 for consistency */
  box-sizing: border-box; /* includes padding as part of width */
  width: 100%; 
  display: inline-block;
  padding: 5px; /* moved here from upm for consistancy. */
  padding-right: 30px;
}

.upm {
  float: right; /* Added float right here instead of column-12 to make column-12 more reusable. */
  padding-top: 20px; /* subtracted 5px since it inherits 5px from it's container. */
  /* removed padding: 5px; because it should belong to column-12 */
}

/* make sure to update column class names in your HTML to match */

图片位置已更改

1 个答案: