しばらくの間、要素が右側にあふれていますか？

Question

ガジェットサイトで作業中です。ページに10項目を表示する必要があります。

私の問題はページが読み込まれるたびにアイテム2がアイテム1の右側に浮いていて、左側に正しく表示されていることです。アイテムの残りの部分にも表示されます。すべてのアイテムを一度に残したい。

デモを見ると、私は何を言っているのかを知ることができます。 デモhere. 私のCSSにも添付されています。

私は何をすべきですか？

.article-number{ 
    border: 1px solid; 
    float: left; 
    width: 35px; 
    height: 40px; 
    padding-left: 15px; 
    padding-top: 5px; 
    font-size: 24px; 
    font-weight: 700; 
    background: #000000; 
    color: #ffffff; 
    overflow: hidden; 
} 
.article-item-title{ 
    border: 1px solid; 
    width: auto; 
    height: 40px; 
    overflow: hidden; 
    background: #000000; 
    color: #ffffff; 
    text-align: left; 
    padding-left: 25px; 
    padding-top: 5px; 
    font-size: 24px; 
    font-weight: 700; 
} 
.article_media{ 
    float: left; 
    margin-top: 25px; 
} 
.article-container{ 
border: 1px dotted #ccc; 
height: 170px; 
width: 270px; 
float: right; 
margin-top: 25px; 
margin-bottom: 30px; 
margin-left: 10px; 

} 
.specification{ 
    margin-top: 7px; 
    margin-left: 30px; 
    border-radius: 40px; 
    border: none; 
    width: 220px; 
    text-align: center; 
    background: #ff3800; 
    color: #ffffff; 
    height: 35px; 
    padding-top: 7px; 
    font-weight: 700; 
    font-family: 'Ubuntu', sans-serif; 
    font-size: 17px; 
} 
.specification a{ 
    color: #ffffff; 
} 
#article-flipkart-icon{ 
    margin-left: 40px; 
    margin-top: 10px; 
    float: left; 
} 
.affiliate-link{ 
    width: 145px; 
    float: left; 
    margin-top: 10px; 
    height: 35px; 
    padding-left: 15px; 
    padding-top: 5px; 
    border-top-right-radius: 40px; 
    border-bottom-right-radius: 40px; 
    background: #289dcc; 
    font-weight: 700; 
} 
.affiliate-link a{ 
    color: #ffffff; 
} 
#article-amazon-icon{ 
    float: left; 
    margin-left: 40px; 
    margin-top: 10px; 
} 
.article-wrapper{ 
    margin-top: 50px; 
} 
.article-item-one,.article-item-two,.article-item-three,.article-item-four,.article-item-five,.article-item-six,.article-item-seven,.article-item-eight,.article-item-nine,.article-item-ten{ 
    float: left; 
    margin-bottom: 35px; 
} 
.featured-image{ 
    border: 1px dotted; 
    pointer-events: none; 
} 

Answer 1

これは、すべての画像がしばらくしてレンダリングされているために起こります。
この問題には複数の解決策があります。

1.画像の幅はピクセル単位で設定できます（ケースでは300ピクセル）。 - これにより、画像が表示されるまで適切なコンテンツが適切な位置に表示されます。
2.すべてのアイテムリストに非常に低品質のイメージをプレースホルダとして使用し、後でイメージsrcを適切なイメージURLに置き換えることができます。 - これにより、プレースホルダーイメージが素早くレンダリングされ、適切なイメージが表示されるまで必要なスペースが占有されます。