Question

我有一堆图像，是否有可能不在HTML中定义任何内容，只能在CSS中对它们进行样式设置，以便它们出现在每行垂直对齐的多行中？以下代码有效但+02:00在一行中无休止地进行，我希望在5或6张图像之后有一个新行。

CSS

.wrapper

HTML

.wrapper {
  display: flex;
  align-items: center;
}

Answer 1

试试这个

<强> CSS

.wrapper {

}

img {
  margin: 10px 20px;
  display:inline-block;
  vertical-align:top;
}

<强> demo

Answer 2

.wrapper {
  align-items: center;
  width: 100%;
}

img {
  margin: 10px 20px;
  width: 20%;
}

它应该像那样工作。如果您想要连续拍摄更多或更少的照片，请更改img {}

中的％值

Answer 3

对于Flexbox解决方案

.wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

＆＃13;

.wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
img {
  margin: 10px 20px;
}

＆＃13;

<div class="wrapper">
  <img src="http://placehold.it/150x160" alt="">
  <img src="http://placehold.it/150x120" alt="">
  <img src="http://placehold.it/150x200" alt="">
  <img src="http://placehold.it/150x70" alt="">
  <img src="http://placehold.it/150x170" alt="">
  <img src="http://placehold.it/150x150" alt="">
  <img src="http://placehold.it/150x250" alt="">
  <img src="http://placehold.it/150x110" alt="">
  <img src="http://placehold.it/150x210" alt="">
  <img src="http://placehold.it/150x110" alt="">
  <img src="http://placehold.it/150x210" alt="">
</div>

＆＃13;

Answer 4

试试这段代码：

.wrapper {
}

img {
 margin: 10px 20px;
 width: 20%;
 float:left;
 vertical-align:middle;
}

Answer 5

Do you need like this    


<style>
    .wrapper {
      display: flex;
      align-items: center;
    }

    img {
     margin: 10px 20px;
     width: 20%;
     display:inline-block;
     float:left;
     vertical-align:top;
    }

    </style>
    <html>
    <head>
    <body>
    <div class="wrapper">
      <img src="http://placehold.it/150x160" alt="">
      <img src="http://placehold.it/150x120" alt="">
      <img src="http://placehold.it/150x200" alt="">
      <img src="http://placehold.it/150x70" alt="">
      <img src="http://placehold.it/150x170" alt="">
      <img src="http://placehold.it/150x150" alt="">
      <img src="http://placehold.it/150x250" alt="">
      <img src="http://placehold.it/150x110" alt="">
      <img src="http://placehold.it/150x210" alt="">
      <img src="http://placehold.it/150x110" alt="">
      <img src="http://placehold.it/150x210" alt="">
    </div>
    </body>
    </head>
    </html>

垂直对齐多行图像

5 个答案: