0

感谢 SeanKendle 在为什么我的动态 HTML 似乎是随机放置的？，我在网站的外观上取得了进展，但如您所见：

在此处输入图像描述

...它仍然需要一些工作，特别是第一行需要从选项卡下方开始。我怎样才能做到这一点？向选项卡小部件添加填充似乎没有帮助，因为它已经被动态生成的 html 侵占，所以我不知道如何“下推”第一行。

基本的 html、css 和 jQuery 可以在这里看到：http: //jsfiddle.net/clayshannon/cMYEH/6/

...和html生成代码是这样的：

$.getJSON('Content/NBCCJr.json', function (data) {
    // I tried renaming the above to nbcc.json, but it won't work with that name...?!? $.getJSON('Content/nbcc.json', function (data) {
    $.each(data, function (i, dataPoint) {
        if (IsYear(dataPoint.category)) {
            htmlBuilder += '<div class=\"yearBanner\">' + dataPoint.category + '</div>';
        } else { // see snippet at top of unit for dealing with landscape-oriented books (such as some children's books) to change height and width of img
            htmlBuilder += '<section class=\"wrapper\" ><a id=\"mainImage\" class=\"floatLeft\" href=\"' +
                dataPoint.imghref + '\"' + ' target=\"_blank\"><img height=\"160\" width=\"107\" src=\"' +
                dataPoint.imgsrc + '\"' +
                dataPoint.imgalt + '></img></a>' +
                '<div id=\"prizeCategory\" class=\"category\">' +
                dataPoint.category +
                '</div><br/><cite id=\"prizeTitle\" >' +
                dataPoint.title +
                '</cite><br/><div id=\"prizeArtist\" class=\"author\">' +
                dataPoint.author +
                '</div><br/>';
            if (dataPoint.kindle.trim().length > 2) {
                htmlBuilder += '<button><a href=\"' + Urlize(dataPoint.kindle) + '\"' +
                    ' target=\"_blank\">Kindle</a></button>';
            }
            if (dataPoint.hardbound.trim().length > 2) {
                htmlBuilder += '<button><a href=\"' + Urlize(dataPoint.hardbound) + '\"' +
                    ' target=\"_blank\">Hardbound</a></button>';
            }
            if (dataPoint.paperback.trim().length > 2) {
                htmlBuilder += '<button><a href=\"' + Urlize(dataPoint.paperback) + '\"' +
                    //'class=\"float-right\" target=\"_blank\">Paperback</a></button>';
                    ' target=\"_blank\">Paperback</a></button>';
            }
            htmlBuilder += '</section>';
        }
    }); //each
    $('#BooksContent').append(htmlBuilder);

我将此添加到 CSS 中的 section.wrapper 中：

padding-top:25px;

...但是，如您所见，我仍然有侵犯动态 html 第一行的内容。我是否需要在 CSS 中添加有关选项卡小部件的内容，或者更改 html 的生成，或者...？？？

4

2 回答 2

1

而不是padding-top尝试margin-top看看它是否有任何不同。填充只会扩大背景，因为它被填充在里面，边距应该降低整个东西。

于 2013-07-20T03:34:33.147 回答
1

对我来说，小提琴看起来不错。您是否进行了任何更改，如果您希望书籍在一年后从下一行开始，而不仅仅是删除“.yearBanner”的浮动：左属性

除此之外，我没有看到任何错误的对齐方式。如果您的屏幕截图版本不同，请尝试设置 position:relative，然后使用 top:25px 属性。

您能否更清楚地简要介绍您的问题，并给我们一个小提琴来展示您的确切问题。如果我遗漏了什么，请原谅。

于 2013-07-20T03:41:46.490 回答