Question

https://cloud.google.com/appengine/docs/standard/java/config/cron我将自己的画廊分为3行，并以不同的大小彼此左右对齐。

我有代码可以在其中将图像提取到数据库，并且它将以三行的形式发布到我的网站上。

.images-item {
min-height: 1px;
float: left;
padding-left: 5px;
padding-right: 5px;
position: absolute;
}

<div class="images-item">
<?php echo "<img class='img-size' 'img- 
responsive'id='hp'src='http://localhost/upload_images/".$rs['image']."'/>"; ?>
</div>

我喜欢将图像按常规大小分为3行内联，并排显示，且不会与其他图像重叠。

Answer 1

删除position: absolute并浮动，然后使用display:inline-block。然后为商品指定宽度，在您的情况下，商品的宽度应为33％;

.images-item {
    display: inline-block;
    width: 33%; /* Number of items divide by 100 */
    min-height: 1px;
    padding-left: 5px;
    padding-right: 5px;
    }

更新：

您可以使用flex实现您想要的。

.item-parent{
  display: flex;
  flex-flow: column wrap;
  justify-content: flex-start;
  align-items: flex-start;
}


<div class="item-parent">
  <div class="images-item">
    <?php echo "<img class='img-size' 'img- 
responsive'id='hp'src='http://localhost/upload_images/".$rs['image']."'/>"; ?>
  </div>
</div>

Answer 2

我认为您可以使用垂直对齐的Flexbox。

别忘了为容器放一个最大高度:)

希望有帮助！

.container {
  display:flex;
  flex-direction:column;
  max-height:600px;
  flex-wrap: wrap;
}

img{
  padding: 5px;
}

<div class="container">
  <img src="https://picsum.photos/200/260
" />
    <img src="https://picsum.photos/200/310
" />
    <img src="https://picsum.photos/200/200
" />
    <img src="https://picsum.photos/200/250
" />
    <img src="https://picsum.photos/200/550
" />
</div>

Answer 3

您可以尝试这种方式：

* {
  box-sizing: border-box;
}

.row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 2px;
}

.column {
  -ms-flex: 33%; /* IE10 */
  flex: 33%;
  max-width: 33%;
  padding: 0 2px;
}

.column img {
  margin-top: 4px;
  vertical-align: middle;
}

<div class="row"> 
  <div class="column">
    <img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/rocks.jpg" style="width:100%">
  </div>
  <div class="column">
    <img src="https://www.w3schools.com/w3images/paris.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/nature.jpg" style="width:100%">
  </div>
  <div class="column">
    <img src="https://www.w3schools.com/w3images/rocks.jpg" style="width:100%">
  </div>
</div>

Answer 4

只需检查下面的jsfiddle链接，即可找到与对齐图像有关的上述问题。

Align Images in a row

如果要显示它，请边对边然后从css中删除padding:10px;。

Answer 5

感谢您发布并提出一些想法。我已经为我的问题做了正确的代码。我会在这里分享给需要的人。

.boxfourcolumns { 
float: left; padding-left: 10px; 
padding-right: 10px; 
width: 33.3%; 
display: inline-block; 
margin-bottom: 20px; 
position: relative; 
z-index: 0; 
}

<div class="container">

            <?php
                $sql = mysqli_query($mysqli,"SELECT * FROM galleries ORDER BY id 
            DESC") or die("Error fetching data...");
                 while($rs=mysqli_fetch_array($sql)){
            ?>

            <!-- image 1 -->
            <div class="boxfourcolumns">
                <span class="gallery">
                    <?php echo "<img class='img-size' 'img-responsive' 
                     id='hp'src='http://localhost/upload_images/".$rs['image']."'/>"; 
            ?>
                </span>
            </div>
            <!-- image 1 -->

            <?php } ?>

 </div>

如何在不重叠其他图像的情况下绝对图像？

5 个答案: