网页同排图片

Question

我想要这些照片在同一行我应该更改什么？

我试过向左浮动和其他命令，但有一张图片停留在右下角。

<section id="services">
<div class="container">
<div class="row wow fadeInUp">
<div class="col-md-4">
<img src="resimler/bimplus.jpg" class="wow fadeInRight">
<h4 class="wow fadeInRight delay-2s">BIMPLUS</h4>
<p>HNP</p>
</div>
<div class="col-md-4">
<img src="resimler/brighe.jpg" class="wow fadeInRight" height="80px">
<h4 class="wow fadeInRight delay-2s">BRIDGE</h4>
<p>HNP</p>
</div>
<div class="col-md-4">
<img src="resimler/precast.jpg" class="wow fadeInRight">
<h4 class="wow fadeInRight delay-2s">PRECAST</h4>
<p>HNP</p>
<div class="col-md-4">
<img src="resimler/precast.jpg" class="wow fadeInRight">
<h4 class="wow fadeInRight delay-2s">PRECAST</h4>
<p>HNP</p>
</div>
</div>    
</div>    
</section>

和 style.css 文件我试过 margin-left , float left 但我不能改变。

#services
{
    background-color: #efefef;
    padding-top: 80px;
    padding-bottom: 80px;
}
#services .col-md-4
{
    padding: 20px;
}
#services .col-md-4 h4
{
    padding: 5px;
}
#services .col-md-4 img
{
    width: 200px;
    display: inline-block;
}
#services .col-md-4 p
{
    padding: 5px;
    text-align: justify;
}

Answer 1

在 < p>HNP 之后添加以关闭您的标签

然后，把col-md-4改成col-md-3这样就可以得到4列

Answer 2

您可以使用 display: flex; 来解决这个问题，因为它更灵活，这是一个例子：

<section class="services">
  <div class="service">
    <img src="service.jpg">
    <h3>Service</h3>
    <p>Service Description...</p>
  </div>
  <div class="service">
    <img src="service.jpg">
    <h3>Service</h3>
    <p>Service Description...</p>
  </div>
  <div class="service">
    <img src="service.jpg">
    <h3>Service</h3>
    <p>Service Description...</p>
  </div>
  <div class="service">
    <img src="service.jpg">
    <h3>Service</h3>
    <p>Service Description...</p>
  </div>
</section>

.services {
    display: flex;
    justify-content: space-between;
    background: #eee;
    padding: 40px;
}

.services .service {
    background: #ccc;
    padding: 10px;
}

您可以在此处阅读有关 flexbox 的信息：https://www.w3schools.com/css/css3_flexbox.asp

网页同排图片

Webpage in the same row pictures

html

javascript

css

jquery

bootstrap-4