html - 图像丢失时布局中断

Question

我有下面的 html代码:

    <ul>
        <li>
            <article>
                <header>
                    <h2><a href='#'>WALL-E Review</a></h2>
                    <img src='images/featured01.jpg' alt="WALL-E">
                </header>
            <time datetime="2011-10-10"> 10 Octomber 2011 </time>
            <p>What if mankind had to leave Earth, and somebody forgot to turn the last robot off?</p>
            </article>
        </li>
        <li>
           //contains another <article> similar to the first one
        </li>
        <li>
           //contains another <article> similar to the first one
        </li>
    </ul>

我必须设计这个 html无需使用 css 更改代码只有这样三篇文章才能并排出现。 <img>元素应该在 <time> 之上元素和 <time>元素应该在 <p> 之上元素。像这样:with image .如果图像丢失，虽然它看起来像这样:without image .

这是 css 的简化版本我过去常常设计它的样式以及我认为我出错的地方:

    li {
        float: left;
        //some padding
    }

    time {
        position: relative;
        top: 8px;
    }

    p {
        position: relative;
        top: 16px;
    }

你能帮我解决这个问题，即使图片丢失，时间和描述也总是出现在同一个地方吗？

Answer 1

确保页眉区域有高度:

height:200px - 或类似的东西:

header { 高度:200px; }

img 将需要具有相同的高度，否则看起来会很惊人 - 空白将出现在图像的位置。

另外，为了防止文本出现在时间区域上方，请考虑使用这个:(这可能有点矫枉过正)

li {   /* avoid using float:left as it can adversely effect other DOM elements */
   display: inline-block;
   vertical-align: top;
}
li header {    /* ensure header contains image and is the same size */
  height: 200px;
  overflow: hidden;
}
li header > img {  /* ensure image fits in header */
  height: 200px;
}