Question

我无法一行显示。我将动态循环图像。因此，如果有4到5张图像，那么它应该排成一行。但如果有超过5个图像或者你可以说9，那么它应该出现在下一行。在下面的代码中，我使用的是HTML和CSS但无法进入同一行。

＆＃13;

#umar {
  display: inline;
  width: 100%;
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  width: 20%;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.container {
  padding: 2px 16px;
  margin-bottom: 10px;
}

＆＃13;

<h2>Card</h2>

<div id="umar">
  <div class="card">
    <img src="images/img.jpg" alt="Avatar" style="width:100%">
    <div class="container">
      <h4><b>John Doe</b></h4>
      <p>Architect & Engineer</p>
    </div>
  </div>

  <div class="card">
    <img src="images/img1.jpg" alt="Avatar" style="width:100%">
    <div class="container">
      <h4><b>John Doe</b></h4>
      <p>Architect & Engineer</p>
    </div>
  </div>
</div>

＆＃13;

Answer 1

在卡片类中使用float：left，如下所示： -

 .card {
      box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
      transition: 0.3s;
      float:left;
      width: 20%; 
 }

Answer 2

请使用float:left卡片类：

.card{
  float:left
}

并且还使用媒体查询来获取移动版本的div宽度。

Answer 3

我会为您的容器display: flex添加#umar。您也可以选择为垂直定位设置CSS属性align-items。

＆＃13;

#umar {
  display: flex; /* new */
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  width: 20%;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.container {
  padding: 2px 16px;
  margin-bottom: 10px;
}

＆＃13;

<h2>Card</h2>

<div id="umar">
  <div class="card">
    <img src="images/img.jpg" alt="Avatar" style="width:100%">
    <div class="container">
      <h4><b>John Doe</b></h4>
      <p>Architect & Engineer</p>
    </div>
  </div>

  <div class="card">
    <img src="images/img1.jpg" alt="Avatar" style="width:100%">
    <div class="container">
      <h4><b>John Doe</b></h4>
      <p>Architect & Engineer</p>
    </div>
  </div>
</div>

＆＃13;

我有两个图像，我希望在一行中彼此相邻显示

3 个答案: