php - 图像是垂直显示的，而不是水平显示的？

Question

我在尝试让正在从数据库中显示的图像水平显示时遇到了一些问题。我尝试使用 inline-block，但这似乎根本没有帮助。我也尝试查看其他答案，但我的情况并不走运。

$db = mysqli_connect("localhost", "root", "", "photos");
        $sql = "SELECT * FROM images ORDER BY RAND()";
        $result = mysqli_query($db, $sql);
        while ($row = mysqli_fetch_array($result)) {
            echo'<div class="hero">
              <div class="hero-content">
                <div class="row">
                  <div class="social-img hide-750">
                    <div class="social-content">
                      <img src="img/'.$row["images"].'">
                    </div>
                  </div>
                  </div>
                  </div>
                  </div>';
        }

这是 CSS:

    .hero {
  margin-top: -30px;
}
.hero .hero-content {
  margin: -10px auto 0;
  max-width: 1000px;
 /* padding: 50px 20px 170px;*/
}
.hero .hero-content h1 {
  color: #000;
  font-family: 'Source Sans Pro', Arial, Sans-Serif;
  font-size: 26px;
  font-weight: 600;
  text-align: center;
  -webkit-font-smoothing: antialiased;
}
.hero .hero-content h2 {
  color: #000;
  font-family: 'Source Sans Pro', Arial, Sans-Serif;
  font-size: 16px;
  font-weight: 200;
  text-align: center;
  -webkit-font-smoothing: antialiased;
}
.hero .hero-content .row {
 /* margin-top: 60px;*/
}
.hero .hero-content .row .social-img {
  background-color: #f5f5f5;
  border-color: #e5e5e5;
  border-style: solid;
  border-width: 0 1px 1px 0;
  display: inline-block;
  float: left;
  margin: 0 20px 80px;
  width: 29%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}
.hero .hero-content .row .social-img .social-content {
  margin: 10px;
}
.hero .hero-content .row .social-img .social-content img {
  margin-bottom: 10px;
  height: auto;
  width: 100%;
}
.hero .hero-content .row .social-img .social-content p {
  color: #505e67;
  font-family: 'Source Sans Pro', Arial, Sans-Serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  margin: 0 0 20px;
  -webkit-font-smoothing: antialiased;
}
.hero .hero-content .row .social-img .share .fa {
  color: #bababa;
  font-size: 20px;
  padding-right: 10px;
}
.hero .hero-content .row .social-img .share .fa:hover {
  color: #f17e6f;
}
@media (max-width: 990px) {
  .hero .hero-content .row .social-img {
    width: 44%;
  }
  .hero .hero-content .row .social-img.hide-990 {
    display: none;
  }
}
@media (max-width: 750px) {
  .hero .hero-content {
    padding: 70px 100px 220px;
  }
  .hero .hero-content .row .social-img {
    margin: 0 0 70px;
    width: 100%;
  }
  .hero .hero-content .row .social-img.hide-750 {
    display: none;
  }
  .hero .hero-content .row .social-img .social-content img {
    max-height: inherit;
  }
}
@media (max-width: 575px) {
  .hero .hero-content {
    padding: 70px 20px 200px;
  }
  .hero .hero-content h1 {
    font-size: 20px;
  }
}

我不明白为什么它要垂直显示每张图片。

Answer 1

DIV 是 block 元素，默认情况下其宽度为父元素的 100%。您必须将这些容器制作成内联 block - 但是所有它们都应该彼此相邻显示，而不仅仅是内部容器。