私はお互いの隣に一列に表示する2つの画像を持っています

Question

私は1つの行に表示することができません。私は画像を動的にループさせます。したがって、4〜5枚の画像がある場合は、1つの行に表示されます。しかし、5枚以上の画像がある場合、または9枚と言うことができる場合は、次の行に表示されます。以下のコードでは、HTMLとCSSを使用していますが、同じ行には入りません。

#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; 
 
}

<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>

Answer 1

利用フロート：次のようにカードのクラスに左： -

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

Answer 2

あなたは以下を使用できます：

<img src="imageLocation" style="float: left; width: 30%; margin-right: 1%; margin-bottom: 0.5em;> "

あなたは以下を使用することができますOneの画像を追加するリンク行：

https://owlcation.com/stem/how-to-align-images-side-by-side

Answer 3

フロートを使用してください：カードクラスの左：

.card { フロート： 左}

を、また、モバイルバージョンのDIV幅のメディアクエリを使用します。

Answer 4

コンテナ#umarにはdisplay: flexを追加します。オプションでCSSプロパティーを垂直方向の位置合わせのためにalign-itemsに設定することもできます。

#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; 
 
}

<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>