html - 制作灵活的 CSS 布局以在文本气球中显示用户评论时遇到麻烦

Question

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

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

但是结果感觉不太好，很“敏感”(一点也不灵活)；例如，当我调整窗口大小或在平板电脑上打开页面时，它看起来很恶心；文本 block 包裹并显示在头像图像下方...

问题 1: 正如我所提到的，我一直在寻找/研究很多大型网站(例如 YouTube、Twitter 和 FaceBook)如何做类似的事情，并且 HTML/CSS 看起来我认为有点困惑。有人分享这个想法/意见吗？

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

一些备注:

• 不应使用任何图像(当然，头像图像除外)
• 不应使用表格；仅 Div 和/或 HTML-5 语义(例如页眉、页脚、文章等)
• CSS/HTML 布局应该足够灵活，能够适本地 self 调整。在图像上，您可以了解我希望如何在不同场景中显示它。
• 应在 IE、FireFox、Safari 和 Chrome 的最新版本中正常显示。

Answer 1

考虑到以下标记:

<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 Fiddle demo .

---

已编辑以回应有效评论，如下:

• 我认为屏幕阅读器不会读取属性，这意味着将数据所有者的内容放入其自己的元素而不是属性中可能会更好。

• 一个狡辩(也如上所述)[屏幕阅读器不会阅读 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;
}

Revised JS Fiddle .