Question

感谢SeanKendle在Why is my dynamic HTML seemingly randomly placed?，我在我的网站外观方面取得了进展，但正如您所见：

enter image description here

...它仍然需要一些工作，特别是第一行需要从标签下方开始。我怎么能做到这一点？看起来像添加填充到选项卡小部件会有所帮助，因为它已经被动态生成的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的生成，或者...... ???

Answer 1

而不是padding-top尝试margin-top，看看它是否有所不同。填充只会扩大背景，因为它填充在里面，边缘应该降低整个事物。

Answer 2

对我来说，小提琴看起来不错。您是否进行了任何更改，如果您希望书籍从一年后的下一行开始，那么只需删除'.yearBanner'的float：left属性

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

您能否更清楚地说明您的问题并给我们一个小提示来展示您的确切问题。如果我遗失了什么，请原谅。

如何将第一行图像向下推？

2 个答案: