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

【问题标题】：How can I push the first row of images down?如何将第一行图像向下推？
【发布时间】：2013-07-20 11:41:46
【问题描述】：

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

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

【问题讨论】：

完美 - 让它成为一个答案，我会这样标记它。

标签： jquery css html dynamic

【解决方案1】：

用padding-top 代替margin-top 看看有什么不同。填充只会扩大背景，因为它被填充在里面，边距应该降低整个东西。

【讨论】：

【解决方案2】：

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

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

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

【讨论】：