2

我正在构建一个网站，该网站显示用户放置的评论的垂直堆叠列表。文本应该出现在一个基本上显示用户姓名的文本气球中，在文本下方，最后在文本气球页脚中，它显示两个链接并向右浮动，一个时间戳。

由于设计/布局不是我的事，我花了一些痛苦的日子才用纯 CSS（要求）实现这一点，我设法使列表看起来非常整齐。为此，我尝试研究 Google 和 Twitter 用来显示他们的视频和推文的 CSS，并尝试从中提取一些有用的东西。但是，我注意到他们的 CSS 和 HTML 非常庞大，我质疑他们是否以“正确”的方式进行操作，或者他们是否发现这是使其在所有类型的设备上良好显示的唯一可能性。（也许有人可以对此有所了解吗？）结论是它对我来说不是很有用。

然而，结果感觉并不好，而且很“敏感”（一点都不灵活）；例如，当我调整窗口大小或在平板电脑上打开页面时，它看起来很恶心；包裹并显示在头像图像下的文本块...

问题 1：正如我所提到的，我一直在研究/研究大型网站（如 YouTube、Twitter 和 FaceBook）如何做类似的事情，而我认为 HTML/CSS 看起来有点混乱。有人分享这种想法/意见吗？

问题 2：有人可以为我提供一个好的起点，即 HTML/CSS 示例（最好在 JSFiddle 左右），用于以下内容：

在此处输入图像描述

一些备注：

  • 不应使用任何图像（除了头像图像之外）
  • 不应使用表格；仅 Div 和/或 HTML-5 语义（例如页眉、页脚、文章等）
  • CSS/HTML 布局应该非常灵活，可以适当地自我调整。在图像上，您可以知道我希望它如何在不同的场景中显示。
  • 在 IE、FireFox、Safari 和 Chrome 的最新版本中应该可以很好地显示。
4

1 回答 1

4

鉴于以下标记：

<div class="wrap">
    <img src="http://davidrhysthomas.co.uk/img/dexter.png" />
    <div class="comment" data-owner="Dexter">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lacus lacus, blandit sit amet iaculis sodales, eleifend ut massa. Mauris arcu felis, facilisis sed bibendum et, tristique tincidunt dolor. Cras a hendrerit nisl. Maecenas accumsan, urna at aliquam blandit, ipsum erat pellentesque urna, et interdum mauris lacus et tellus.</p>
        <ol class="postscript"> <!-- links and timestamp -->
            <li><a href="#">link 1</a></li>
            <li><a href="#">link 2</a></li>
            <li class="date">3 days ago</li>
        </ol>
    </div>
</div>​

以及以下 CSS：

div.wrap {
    width: 90%;
    margin: 0 auto 1em auto;
    position: relative; /* the image will be absolutely-positioned relative to this */
}

div.wrap:first-child {
    margin-top: 1em; /* just for aesthetic reasons, adjust or remove, to taste */
}

div.comment {
    font-size: 1em;
    position: relative; /* the arrow on the left side of the div positioned relative to this element */
    margin-left: 60px; /* allows a 10px gutter for the arrow to fit into */
    border-radius: 0.75em 0.75em 0.75em 0.75em;
    background-color: #ccc;
    line-height: 1.4em;
    font-family: Helvetica; /* or whatever... */
}

div.comment::before { /* requires a fairly modern browser */
    content: attr(data-owner); /* displays the name of the comment-owner */
    border-radius: 0.75em 0.75em 0 0;
    background-color: #ccc;
    display: block;
    text-indent: 10%; /* adjust to taste */
    border-bottom: 3px solid #999;
}

div.comment::after { /* again, requires a fairly modern browser */
    content: ''; /* this property is necessary, even if only an empty string */
    position: absolute;
    top: 50%;
    left: 0;
    border: 10px solid transparent;
    border-right: 10px solid #ccc; /* forms the 'arrow' */
    margin: -10px 0 0 -20px;
}

div.comment p { /* or whatever, adjust to taste */
    width: 80%;
    margin: 0 auto 1em auto;
    padding-bottom: 1em;
}

img {
    position: absolute;
    top: 50%;
    width: 50px;
    float: left;
    border-radius: 10px;
    margin-top: -25px;
}​

p + ol.postscript {
    width: 80%;
    font-size: 0.8em;
    margin: -0.5em auto 0 auto;
}
ol.postscript::after {
    content: '';
    height: 0.5em;
    display: block;
    clear: both;
}
ol.postscript li {
    float: left;
    margin-right: 0.5em;
}
ol.postscript li.date {
    float: right;
    margin-right: 0;
}

.wrap a:link,
.wrap a:visited {
    color: #333;
    text-decoration: none;
    border-bottom: 1px solid #333;
}

.wrap a:hover,
.wrap a:active,
.wrap a:focus {
    color: #f00;
    border-bottom: 1px solid #f00;
}​

JS 小提琴演示。

针对有效评论进行了编辑，如下所示：

  • 我认为屏幕阅读器不会读取属性，这意味着将 data-owner 的内容放在它自己的元素中可能会更好，而不是属性。

  • 一个小问题（也如上所述）[屏幕阅读器不会阅读 CSS 生成的内容]（一个小问题（如上所述）屏幕阅读器不会阅读 CSS 生成的内容，并且评论作者在我看来是一个必不可少的内容，应该是屏幕阅读器用户可以访问。）在我看来，评论作者是屏幕阅读器用户应该可以访问的基本内容。

鉴于合理的建议，我已经替换了.comment::before元素，添加了一个离散的h2：

<div class="wrap">
    <img src="http://davidrhysthomas.co.uk/img/dexter.png" />
    <div class="comment" data-owner="Dexter">
        <h2 class="owner">Dexter</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lacus lacus, blandit sit amet iaculis sodales, eleifend ut massa. Mauris arcu felis, facilisis sed bibendum et, tristique tincidunt dolor. Cras a hendrerit nisl. Maecenas accumsan, urna at aliquam blandit, ipsum erat pellentesque urna, et interdum mauris lacus et tellus.</p>
        <ol class="postscript">
            <li><a href="#">link 1</a></li>
            <li><a href="#">link 2</a></li>
            <li class="date">3 days ago</li>
        </ol>
    </div>
</div>

并附加了以下CSS（代替原来的.comment::before）：

div.comment p {
    width: 80%;
    margin: 0 auto 1em auto;
}

修订 JS Fiddle。

于 2012-04-28T22:03:37.357 回答