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

如果您使用 chrome 并检查“真实页面”，您会看到尚未加载的图像不保留它的位置，就像该图像上的第二个块：

图像不适合它的位置

只需按几个 f5-s。

为什么会这样以及如何使图像在加载过程中占据它的位置？

我不是设计师，但我必须解决这个问题。我一直无法找到问题的根源。

如果我明确地为图像标签指定宽度 =“110”，其他浏览器（FF、IE、Opera）可以正常工作。

4

2 回答 2

0

您可以尝试将浮动、宽度和高度分配给图像的容器，在本例中为<a>. block如果还不是这种情况，您可能必须将容器的显示属性更改为。

于 2013-01-18T15:22:15.977 回答
0

chrome 更新后，以下内容足以解决此问题：

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

这样即使在加载过程中，图片的大小也会在 chrome 中得到尊重。

于 2013-04-10T06:21:10.763 回答