Question

此刻，我很想将这4张图片（在同一行中）与图片一起放入div。

HTML：

<div class="iniciRo">
            <img src="assets/images/Rodape/backbot.png">
            <div>
                <div class="row">
                    <div class="coluna">
                        <a href="#"><img src="assets/images/Rodape/visitas-escolas.png"/></a>
                    </div>
                    <div class="coluna">
                        <a href="#"><img src="assets/images/Rodape/rafc.png"/></a>
                    </div>
                    <div class="coluna">
                        <a href="#"><img src="assets/images/Rodape/rioavetv.png"/></a>
                    </div>
                    <div class="coluna">
                        <a href="#"><img src="assets/images/Rodape/galeri.png"/></a>
                    </div>
                </div>
            </div>
</div>

CSS：

.iniciRo img{
    width: 100%;
}
.iniciRo .coluna img{
    width: 270px;
    z-index: 4;
}
.iniciRo > div{
    padding: 30px 0 10px 0;
}

.iniciRo .row > div{
    padding-bottom: 20px;
}
.coluna{
    position: relative;
    padding-left: 15px;
    padding-right: 15px;
    float: left;
}
.row{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    max-width: 75em;
}

我已经尝试使用z-index，但是什么也没发生。任何帮助将不胜感激，请帮助我...

Answer 1

赞：

coluna img {
  position: relative;   
  padding: 50em;
}

.iniciRo img{
  position: absolute;
    width: 100%;
}

.iniciRo > div{
    padding: 30px 0 10px 0;
}

.iniciRo .row > div{
    padding-bottom: 20px;
}

.coluna{
    position: relative;
    padding-left: 15px;
    padding-right: 15px;
  margin-bottom: 30em;

}

.row{
  position: relative;
  display: flex;
  flex-direction: column;
    width: 100%;
    max-width: 75em;
  clear: both;
}

换句话说，您要position: absolute用于iniciRo img，position: relative用于.row，并将flexbox用于.row。 Here's a JS Fiddle.

Answer 2

使用此Flexbox CSS代码

<div class="flex-container">
<div>
<img src="https://placehold.it/350x150" />
</div>
<div>
<img src="https://placehold.it/350x150" />
</div>
<div>
<img src="https://placehold.it/350x150" />
</div>
<div>
<img src="https://placehold.it/350x150" />
</div>
</div>


    .flex-container{
    display:flex;
    }
   .flex-container div {
     flex:1;
    margin:5px; 
   }
  img {
   width:100%;
   }

如何将这4张图片放入1张图片中？

2 个答案: