Question

我有这个代码可以垂直对齐最新的图像。我希望这些图像水平对齐。较新的图像应相互水平对齐，而不是垂直对齐。

＆＃13;

.slidepanels {
  /* Prevent vertical gaps */
  line-height: 0;
  /*number of images in a column*/
  column-count: 4;
  column-gap: 8px;
}

.cycler {
  position: relative;
}

.slidepanels div img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
  margin-bottom: 3.6%;
}

＆＃13;

<div class="slidepanels">
  <div id="cycler1" class="cycler">
    <img src="https://i.pinimg.com/564x/d5/c4/37/d5c43719a8e57e08046258f3551ab5bd.jpg" />
  </div>
  <div id="cycler1" class="cycler">
    <img src="https://i.pinimg.com/564x/b4/e2/6e/b4e26e25176a8bf4c5307645ef45f745.jpg" />
  </div>
  <div id="cycler1" class="cycler">
    <img src="https://i.pinimg.com/564x/88/fb/b1/88fbb1d82e00027dcf3a42bfbd5bbdda.jpg" />
  </div>
  <div id="cycler1" class="cycler">
    <img src="https://i.pinimg.com/564x/ed/2a/94/ed2a949af7ad6ceb70115c4ba0a4c1b6.jpg" />
  </div>
  <div id="cycler1" class="cycler">
    <img src="https://i.pinimg.com/564x/03/51/ed/0351eda2c07dfde2439dbb8b4f5cc5a4.jpg" />
  </div>
  <div id="cycler1" class="cycler">
    <img src="https://i.pinimg.com/564x/a7/4b/27/a74b273fdc5fd091b8a80ee64aea7aec.jpg" />
  </div>
  <div id="cycler1" class="cycler">
    <img src="https://i.pinimg.com/564x/ee/c1/9e/eec19e8fe57060defd7c129956cbb339.jpg" />
  </div>
  <div id="cycler1" class="cycler">
    <img src="https://i.pinimg.com/564x/6c/08/5e/6c085e2a503bd268b52ae1acf3112f1f.jpg" />
  </div>

＆＃13;

Answer 1

为什么在容器div中使用column-count Property

column-count属性指定元素应分成的列数。

        -webkit-column-count: 4;
        -webkit-column-gap:   8px;
        -moz-column-count:    4;
        -moz-column-gap:      8px;
        column-count:         4;
        column-gap:           8px;

这个css会在容器div中创建4列，以避免这样做：

.slidepanels {
            /* Prevent vertical gaps */
                text-align: right;
              line-height: 0;
            /*-webkit-column-count: 4;
            -webkit-column-gap:   8px;
            -moz-column-count:    4;
            -moz-column-gap:      8px;
            column-count:         4;
            column-gap:           8px;*/
        
              }
              .cycler{
            position: relative;
            display:inline-block;
            width:100%;
              }
        
              .slidepanels div img {
            /* Just in case there are inline attributes */
            width: 100% !important;
            height: auto !important;
            margin-bottom: 3.6%;
              }

<div class="slidepanels">
                          <div id="cycler1" class="cycler">
                            <img src="https://i.pinimg.com/564x/d5/c4/37/d5c43719a8e57e08046258f3551ab5bd.jpg" />
                          </div>
                          <div id="cycler1" class="cycler">
                            <img src="https://i.pinimg.com/564x/b4/e2/6e/b4e26e25176a8bf4c5307645ef45f745.jpg" />
                          </div>
                          <div id="cycler1" class="cycler">
                            <img src="https://i.pinimg.com/564x/88/fb/b1/88fbb1d82e00027dcf3a42bfbd5bbdda.jpg" />
                          </div>
                          <div id="cycler1" class="cycler">
                            <img src="https://i.pinimg.com/564x/ed/2a/94/ed2a949af7ad6ceb70115c4ba0a4c1b6.jpg" />
                          </div>

Answer 2

将这些样式添加到图片标记

img {
display:block;
margin: 0 auto;
}

Answer 3

使用flexbox

.slidepanels {
  display: flex;
  flex-direction: column;
}

<div class="slidepanels">
  <img src="https://i.pinimg.com/564x/d5/c4/37/d5c43719a8e57e08046258f3551ab5bd.jpg" />
  <img src="https://i.pinimg.com/564x/b4/e2/6e/b4e26e25176a8bf4c5307645ef45f745.jpg" />
  <img src="https://i.pinimg.com/564x/88/fb/b1/88fbb1d82e00027dcf3a42bfbd5bbdda.jpg" />
  <img src="https://i.pinimg.com/564x/ed/2a/94/ed2a949af7ad6ceb70115c4ba0a4c1b6.jpg" />
</div>

这样，您只需切换一个属性即flex-direction即可在对齐之间切换。

Answer 4

使用flex并在图像上指定max-height。不要忘记将flex-wrap: wrap添加到容器中。

.slidepanels {
  display: flex;
  flex-wrap: wrap;
}

img {
  max-height: 200px;
}

<div class="slidepanels">
  <img src="https://i.pinimg.com/564x/d5/c4/37/d5c43719a8e57e08046258f3551ab5bd.jpg" />
  <img src="https://lorempixel.com/400/100/" />
  <img src="https://i.pinimg.com/564x/a7/4b/27/a74b273fdc5fd091b8a80ee64aea7aec.jpg" />
  <img src="https://i.pinimg.com/564x/ed/2a/94/ed2a949af7ad6ceb70115c4ba0a4c1b6.jpg" />

  <img src="https://i.pinimg.com/564x/b4/e2/6e/b4e26e25176a8bf4c5307645ef45f745.jpg" />
  <img src="https://lorempixel.com/300/300/" />
  <img src="https://i.pinimg.com/564x/ee/c1/9e/eec19e8fe57060defd7c129956cbb339.jpg" />
</div>

在CSS中水平对齐图像

4 个答案: