0

固定サイズの画像が左に浮いている問題を修正する必要がありますが、画像がまだ読み込まれていない間に「折りたたまれている」(つまり、想定される幅を占めていないことを意味します.

私はこれのために jsfiddle を作成しましたが、フィドルではすべてが驚くほどうまく動作します。(画像の読み込みが非常に高速である可能性はありますが、私のシステムではかなり目立つので、それは疑わしいです。

私のレイアウト：

<div class="wrap">
  <a href="#somewhere">
    <img width="110" height="110" class="img" src="http://placehold.it/110x110" alt="Picture" />
  </a>
  <div class="bd">
    <h3>
      <a href="#somewhere">Lorem Ipsum</a>
    </h3>
    <div class="description">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae sodales lectus. Suspendisse massa ipsum, tempor eget pharetra ac, gravida eu ipsum. Nam sit amet neque vitae dolor consequat volutpat quis et neque. Vestibulum ut purus in quam tincidunt ultricies. In consectetur eleifend dolor, fringilla dignissim lectus dapibus sit amet. Integer nec velit nisl. Cras quis molestie leo. Cras eget odio vel velit eleifend auctor ut a lacus. Suspendisse auctor tincidunt enim eu posuere. Cras dui magna, laoreet sit amet interdum nec, rutrum sit amet turpis. Donec mattis velit eu lectus condimentum luctus.</p>
    </div>
  </div>
</div>

関連する CSS:

.wrap {
    padding: 10px;
    margin: 10px 0px;
    overflow: hidden;
}

.img {
  float: left;
  margin-right: 10px;
}

.bd {
  min-width: 200px;
  overflow: hidden;
  zoom: 1;
}

jsfiddle で:

http://jsfiddle.net/PT4ST/1/

実際のページ (問題が実際に表示されている場所):

http://a4team.eu/multimedia-c376597?oldal=5

クロムを使用して「実際のページ」を確認すると、この画像の 2 番目のブロックのように、まだ読み込まれていない画像がその場所を保持していないことがわかります。

画像はその場所を保持していません

f5-s を数回押すだけです。

これはなぜですか?また、ロード中に画像をその場所に配置する方法を教えてください。

私はデザイナーではありませんが、これを修正する必要があります。問題の根本を見つけることができませんでした。

画像タグに width="110" を明示的に指定すると、他のブラウザー (FF、IE、Opera) は正常に動作します。

4

2 に答える 2

0

float、幅、高さを画像のコンテナー (この場合は<a>. blockまだ変更されていない場合は、コンテナーの表示プロパティを に変更する必要がある場合があります。

于 2013-01-18T15:22:15.977 に答える
0

クロムが更新された後、これを修正するには以下で十分でした:

.wrap .img {
    width: 110px;
    height: 110px;
}

このようにして、ロード中もクロムで画像のサイズが尊重されます。

于 2013-04-10T06:21:10.763 に答える