0

コードは次のとおりです。

 <style>
   .thumbnail
   {
   float:left;
   width:110px;
   height:90px;
   margin:5px;
  }
</style>
  <body>
  <img src="klematis_small.jpg" style="width:107px; height:140px">
  <img class="thumbnail" src="klematis_small.jpg" style="width:107px; height:150px">

紛らわしいのは、フロートされた 2 番目の img が最初の img の前に表示される理由です。最初の img を 2 番目の img に配置すると、すべてが期待どおりに機能します。

4

4 に答える 4

0

フロートは使用せず、display: inline-block; を使用するだけです。これにより、コードが書かれているのとまったく同じ順序でアイテムが表示されます。

于 2013-05-10T20:42:21.173 に答える