Question

我的画廊右侧有一些额外空间 ...

我的图片'容器：

.my-gallery figure {
  display: block;
  float: left;
  width: 150px;
}

使用% percent value是否可以使图像始终在不同大小的屏幕中不使用处于水平中心？或者有人有一个天才的想法，使额外的空间不那么奇怪？

或者% percent value技巧是唯一的方法吗？

在屏幕A：

在屏幕B中：

.my-gallery {
  width: 100%;
  float: left;
}
.my-gallery img {
  width: 100%;
  height: 112px;
}
.my-gallery figure {
  display: block;
  float: left;
  margin: 0 5px 5px 0;
  width: 150px;
}
.my-gallery figcaption {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-height: 26px;
}
.my-gallery img {
  max-width: 100%;
}

<div class="my-gallery">
  <figure>
    <a href="big1.jpg">
      <img src="http://placehold.it/112x150" alt="1" />
    </a>
    <figcaption>111111111111111111111111</figcaption>
  </figure>
  <figure>
    <a href="big2.jpg">
      <img src="http://placehold.it/112x150" alt="2" />
    </a>
    <figcaption>222222222222222222222222</figcaption>
  </figure>
  <figure>
    <a href="big3.jpg">
      <img src="http://placehold.it/112x150" alt="3" />
    </a>
    <figcaption>3333333333333333333333333333333</figcaption>
  </figure>
  <figure>
    <a href="big4.jpg">
      <img src="http://placehold.it/112x150" alt="4" />
    </a>
    <figcaption>444444444444444444444444</figcaption>
  </figure>
  ...
</div>

Answer 1

如果使用%是个问题，可以使用css flexbox来完成此操作。

https://jsfiddle.net/76dybc3p/1/

更改.my-gallery的css并移除figure

中的浮动

.my-gallery {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.my-gallery figure {
  display: block;
  margin: 0 5px 5px 0;
  width: 150px;
}

Answer 2

最实用的方法是使用@media查询

我还将.my-gallery规则更改为

.my-gallery {
  margin: 0 auto
}

示例代码段

.my-gallery {
  margin: 0 auto
}
.my-gallery img {
  width: 100%;
  height: 112px;
}
.my-gallery figure {
  display: block;
  float: left;
  margin: 0 5px 5px 0;
  width: 150px;
}
.my-gallery figcaption {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-height: 26px;
}
.my-gallery img {
  max-width: 100%;
}
@media screen and (min-width: 310px) {
  .my-gallery {
    width: 310px;
  }
}
@media screen and (min-width: 465px) {
  .my-gallery {
    width: 465px;
  }
}
@media screen and (min-width: 620px) {
  .my-gallery {
    width: 620px;
  }
}

<div class="my-gallery">
  <figure>
    <a href="big1.jpg">
      <img src="http://placehold.it/112x150" alt="1" />
    </a>
    <figcaption>111111111111111111111111</figcaption>
  </figure>
  <figure>
    <a href="big2.jpg">
      <img src="http://placehold.it/112x150" alt="2" />
    </a>
    <figcaption>222222222222222222222222</figcaption>
  </figure>
  <figure>
    <a href="big3.jpg">
      <img src="http://placehold.it/112x150" alt="3" />
    </a>
    <figcaption>3333333333333333333333333333333</figcaption>
  </figure>
  <figure>
    <a href="big4.jpg">
      <img src="http://placehold.it/112x150" alt="4" />
    </a>
    <figcaption>444444444444444444444444</figcaption>
  </figure>
</div>

Answer 3

我不知道为什么你不会使用％，但这是另一种选择：使用表格来搭建你的物品并设置属性表 - layout：fixed;

HTML

<table>
    <tr>
        <td>
            1
        </td>
        <td>
            2
        </td>
        <td>
            3
        </td>
    </tr>
</table>

<强> CSS

table{
  table-layout: fixed;
}

css水平中心图像，不使用％百分比

3 个答案: