0

我有一段 Jquery 从 youtube 中提取评论并将它们发布在页面上，但是，就目前而言，评论周围的边框是标准尺寸。如果可能的话，我希望通过某种方式将其扩展到评论区域中的文本数量。

小提琴

当前的 CSS：

.videoComments {
    border: 1px solid #000;
    margin-bottom: 20px;
}
.author {
    font-size: 13px;
    font-weight: bold;
    color: grey;
}
4

4 回答 4

1

为什么不这样做呢？

http://jsfiddle.net/8JLH7/9/

添加

.videoComments {
  float:left;
  clear:both;
}
于 2013-09-27T10:07:35.213 回答
0

我不知道如何更新小提琴，但这是您需要的代码：

jQuery

$(document).ready(retriveComments);

function retriveComments() {
$.get("https://gdata.youtube.com/feeds/api/videos/jofNR_WkoCE/comments", function (d) {
    $(d).find("entry").each(function (_, entry) {
        var author = $(entry).find("author name").text(),
            comment = $(entry).find("content").text();
        html = '<div class="videoComments"><div class="inner">';

        html += '<p class="author">' + author + '</p>';
        html += '<p class="comment">' + comment + '</p>';
        html += '</div></div>';

        $('#comments').append(html);
    });
});

}

CSS

.videoComments {
margin-bottom: 20px;
}
.author {
font-size: 13px;
font-weight: bold;
color: grey;
}
.inner{ border: 1px solid red; display: inline-block; }

我在 videoComments div 中添加了一个额外的“内部”div，并将边框应用于该 div。

编辑：也许我知道如何更新小提琴：http: //jsfiddle.net/8JLH7/7/

于 2013-09-27T10:04:26.207 回答
0

只是您可能想要修改以满足您的需要的基本版本：

在前两个var声明之后：

var border = comment.length / 10;

然后更新 html 输出的第一行：

html = '<div class="videoComments" style="border-width: '+border+'px">';

这将为评论中的每 10 个字符赋予每条评论额外 1 像素的边框宽度。

示例：http: //jsfiddle.net/8JLH7/4/

于 2013-09-27T10:04:37.987 回答
0

您的意思是您希望元素.videoComments具有可变高度？

利用：

.videoComments {
    border: 1px solid #000;
    margin-bottom: 20px;
    min-height: 0;
    height: auto;
}

示例：http: //jsfiddle.net/8JLH7/8/

于 2013-09-27T10:06:04.807 回答