HTML/CSS - 表示：インラインで動作しない

Question

私のウェブサイトで助けが必要です。私は、3つの画像が「表示：インライン」として表示され、お互いに隣り合っていないことを意味することに苦労しています。

私の間違いを見つけることができず、歓迎され、示唆されます。

.trikot { 
 
    max-width: 1050px; 
 
    height: 200px; 
 
    border: 2px solid rgba(255, 255, 255, 0.9); 
 
    border-radius: 10px; 
 
    margin-left: 10px; 
 
    margin-top: 10px; 
 
    display: inline; 
 
} 
 
.trikotset { 
 
    margin-top: 15px; 
 
    margin-left: 10px; 
 
    height: 150px; 
 
} 
 
#buy_button { 
 
    background-color: #9c1737; 
 
    width: 100px; 
 
    display: block; 
 
    margin-left: 35px; 
 
}

<section class="trikot"> 
 
    <div id="trikot1"> 
 
    <img class="trikotset" src="img/trikot.jpg"> 
 
    <button id='buy_button' type='button'>Jetzt Kaufen</button> 
 
    </div> 
 
    <div id="trikot2"> 
 
    <img class="trikotset" src="img/hose.jpg"> 
 
    <button id='buy_button' type='button'><a href=>Jetzt Kaufen</button> 
 
\t \t </div> 
 
\t \t <div id="trikot3"> 
 
\t \t <img class="trikotset" src="img/traningsanzug.jpg"> 
 
\t \t <button id='buy_button' type='button'><a href=>Jetzt Kaufen</button> 
 
\t \t </div> 
 
\t \t </section> \t

Answer 1

あなたは、はるかに信頼性の高い状況のこのタイプの山車を見つけるだろう。

EDIT：忘れずに！フローティング要素は絶対に似ていますが、ドキュメントフローから取得されます。

Answer 2

画像は＃trikot1、＃trikot2、＃trikot3コンテナ内部にあります。 display：inline-blockを定義する必要があります。これらのコンテナのために：私はあなたが垂直位置を必要と表示されていないので、

#trikot1, #trikot2, #trikot3 { 
    display: inline-block; 
}