0

動的 HTML がランダムに配置されているように見えるのはなぜですか? の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 の生成を変更する必要がありますか、それとも...???

4

2 に答える 2

1

私にとって、フィドルは良さそうです。何か変更を加えましたか? 書籍を年の後に次の行から開始する場合は、「.yearBanner」の float:left プロパティを削除するだけではありません。

それとは別に、間違ったアライメントは見られません。スクリーンショットと異なるバージョンがある場合は、position:relative を設定してから、top:25px プロパティを使用してみてください。

問題をより明確に説明し、正確な問題を示すためのフィドルを提供していただけますか。何かが足りない場合は、すみません。

于 2013-07-20T03:41:46.490 に答える