如何将图像放在顶部并排放置？

Question

我是html和css的新手。我目前有4张图片，我需要像这张图片一样放在这里：

https://ibb.co/hNcUFx

我的问题是图片只是显示在彼此之上。

<div class="image123"> 
  <div class="imgContainer"> 
    <img src="pizza.jpg" height="200" width="75%"/> 
    <p>This is image 1</p> 
  </div> 
  <div class="imgContainer"> 
    <img class="middle-img" src="tacos.jpg"/ height="200" width="75%"/> 
    <p>This is image 2</p> 
  </div> <div class="imgContainer"> 
    <img src="philly.jpg"/ height="200" width="75%"/> 
    <p>This is image 3</p> 
  </div> 
</div>

Answer 1

试试这个吧

.img-parent-box {
	display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

<div class="img-parent-box">
    <div class="img-box"> <img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
        <p>This is image 1</p>
    </div>
    <div class="img-box"> <img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
        <p>This is image 2</p>
    </div>
    <div class="img-box"> <img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
        <p>This is image 3</p>
    </div>
    <div class="img-box"> <img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
        <p>This is image 4</p>
    </div>
</div>

Answer 2

检查一下

.image123{
  max-width:750px;
  margin:0px auto;
}
.imgContainer{
  float:left;
  width:48%;
  padding:10px 0px;
}
.imgContainer img{
  width:100%;
  height:auto;
  max-width:100%;
  max-height:100%;
  margin:0px auto;
}
.imgContainer p{
  text-align:center;
  background-color:#ff0000;
  color:#ffffff;
  padding:5px 0px;
  margin:5px 0px;
}
@media only screen and (max-width: 767px) {
  .imgContainer{
    float:none;
    width:100%;
  }
}

<div class="image123"> 
  <div class="imgContainer"> 
    <img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" height="200" width="75%"/> 
    <p>This is image 1</p> 
  </div> 
  <div class="imgContainer"> 
    <img class="middle-img" src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" height="200" width="75%"/> 
    <p>This is image 2</p> 
  </div> <div class="imgContainer"> 
    <img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" height="200" width="75%"/> 
    <p>This is image 3</p> 
  </div>
  <div class="imgContainer"> 
    <img class="middle-img" src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" height="200" width="75%"/> 
    <p>This is image 2</p> 
  </div>
</div>

Answer 3

这里的关键是你需要设置div包装图像display: inline-block;和width: 50%;

你能不能试试这个：

.img-parent-box {
  font-size: 0; // this is a trick to fix bug of spacing
}

.img-box {
  display: inline-block;
  width: 50%;
  font-size: initial; // this is to restore the font size of text of images
}

<div class="img-parent-box">
 <div class="img-box"> <img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
    <p>This is image 1</p>
 </div>
 <div class="img-box"> <img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
    <p>This is image 2</p>
 </div>
 <div class="img-box"> <img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
    <p>This is image 3</p>
 </div>
 <div class="img-box"> <img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
    <p>This is image 4</p>
 </div>
</div>

Answer 4

HTML结构

<div class="img-container">
  <div class="row">
    <figure>
      <img src="" alt="">
      <figcaption></figcaption>
    </figure>
    ...
  </div>
  ...
</div> 

.img-container有display: inline-block和.row有display: flex。

总共

body {
  margin: 0;
}

.img-container {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  padding: 15px;
}

.img-container h4 {
  background: orange;
}

.img-container .row {
  display: flex;
}

.img-container figure {
  margin: 0;
}

.img-container img {
  display: block;
}

.img-container figcaption {
  background: yellow;
  margin-top: 15px;
  margin-bottom: 15px;
}

<div class="img-container">
  <h4>Favorite meals</h4>
  <div class="row">
    <figure>
      <img src="http://placehold.it/230x230" alt="">
      <figcaption>Pizza</figcaption>
    </figure>
    <figure>
      <img src="http://placehold.it/230x230" alt="">
      <figcaption>Pizza</figcaption>
    </figure>
    <figure>
      <img src="http://placehold.it/230x230" alt="">
      <figcaption>Pizza</figcaption>
    </figure>
  </div>
  <div class="row">
    <figure>
      <img src="http://placehold.it/230x230" alt="">
      <figcaption>Pizza</figcaption>
    </figure>
    <figure>
      <img src="http://placehold.it/230x230" alt="">
      <figcaption>Pizza</figcaption>
    </figure>
    <figure>
      <img src="http://placehold.it/230x230" alt="">
      <figcaption>Pizza</figcaption>
    </figure>
  </div>
</div>