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 { height: 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;
}

Answer 2

也许你可以尝试将你的元素定位为绝对而不是相对的？这将导致所有对象的位置独立。

顺便说一句，我喜欢你网页的设计。

Answer 3

您如何确保图像尺寸相同？也许使用具有预设尺寸的div，例如宽度：200px;高度：200像素;.然后，如果该div中没有任何内容，它仍然在相同的原始位置进行样式设置，但将为空白。

您可以考虑：

<div></div>

div {
width:200px;
height:200px;
position:relative;
float:left;
}

通过这种方式，您可以将div用作一种占位符，也可以将其作为一个可以随时拍摄图像的位置。

图像丢失时布局中断

3 个答案: