为什么我的动态HTML似乎随机放置？ [英] Why is my dynamic HTML seemingly randomly placed?

查看：174
本文介绍了为什么我的动态HTML似乎随机放置？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想让动态生成的HTML对齐，但我得到的是一个小loosey-goosey：

I want my dynamically generated html to align, yet what I get is a little loosey-goosey:

这里是我的jQuery：

Here's my jQuery:

function getNatlBookCritics() {
    var htmlBuilder = '';
    $.getJSON('Content/NBCCJr.json', function (data) {
        $.each(data, function (i, dataPoint) {
            if (IsYear(dataPoint.category)) {
                htmlBuilder += '<div class=\"yearBanner\">' + dataPoint.category + '</div>';
            } else {
                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\" class=\"title\">' +
                    dataPoint.title +
                    '</cite><br/><div id=\"prizeArtist\" class=\"author\">' +
                    dataPoint.author +
                    '</div><br/>';
                if (dataPoint.kindle.length > 2) {
                    htmlBuilder += '<button><a href=\"' + Urlize(dataPoint.kindle) + '\"' +
                    ' target=\"_blank\">Kindle</a></button>';
                }
                if (dataPoint.hardbound.length > 2) {
                    htmlBuilder += '<button><a href=\"' + Urlize(dataPoint.hardbound) + '\"' +
                    ' target=\"_blank\">Hardbound</a></button>';
                }
                if (dataPoint.paperback.length > 2) {
                    htmlBuilder += '<button><a href=\"' + Urlize(dataPoint.paperback) + '\"' +
                    ' target=\"_blank\">Paperback</a></button>';
                }
                htmlBuilder += '</section>';
            }
        }); //each
        $('#BooksContent').append(htmlBuilder);
        $('#BooksContent').css('background-color', 'black');
    });     //getJSONNBCCJr
}           // getNatlBookCritics()

...这里是相关的CSS ：

...and here's the related CSS:

.yearBanner {
    font-size: 2em;
    color: white;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    float: left;
    padding-top: 100px;
}

.floatLeft {
    float: left;
    padding-right: 20px;
    padding-left: 5px;
}

section.wrapper {
    min-width: 360px;
    overflow: hidden;
    display: inline-block;
}

.category {
    display: inline-block;
    font-family: Consolas, sans-serif;
    font-size: 2em;
    color: Orange;
    width: 160px;
}

.title {
    display: inline-block;
    font-family: Calibri, Candara, serif;
    color: Yellow;
    width: 160px;
}

.author {
    display: inline-block;
    font-family: Courier, sans-serif;
    font-size: 0.8em;
    color: White;
    width: 160px;
}



UPDATE



在相关的说明，是否有任何理由我应该更改此代码：

UPDATE

On a related note, is there any reason why I should change this code:

    }); //each
    $('#BooksContent').append(htmlBuilder);
    $('#BooksContent').css('background-color', 'black');
    $('button').button();
});     //getJSONNBCCJr

...至：

    }); //each
});     //getJSONNBCCJr
$('#BooksContent').append(htmlBuilder);
$('#BooksContent').css('background-color', 'black');
$('button').button();



UPDATE 2



long last是着名的但有缺陷的HTML;我知道这不漂亮，但也有一个jsfiddle这里： http://jsfiddle.net/clayshannon/ cMYEH / 1 / 我通过console.log（htmlBuilder）获得了它

UPDATE 2

Okay, here at long last is the illustrious but flawed HTML; I know it's not pretty, but there's also a jsfiddle here: http://jsfiddle.net/clayshannon/cMYEH/1/ I got it via console.log(htmlBuilder);

<div
   class="yearBanner">2012</div>
<section
   class="wrapper">
   <a
      id="mainImage"
      class="floatLeft"
      href="http://rads.stackoverflow.com/amzn/click/B00655KLOY"
      target="_blank">
   <img
      height="160"
      width="107"
      src="http://images.amazon.com/images/P/B00655KLOY.01.MZZZZZZZ.jpg"
      alt="Ben Fountain book cover"></img>
   </a>
   <div
      id="prizeCategory"
      class="category">Fiction</div>
   <br/>
   <cite
      id="prizeTitle"
      class="title">Billy
   Lynn's
   Long
   Halftime
   Walk</cite>
   <br/>
   <div
      id="prizeArtist"
      class="author">Ben
      Fountain
   </div>
   <br/>
   <button>
   <a
      href="http://rads.stackoverflow.com/amzn/click/B00655KLOY"
      target="_blank">Kindle</a>
   </button>
   <button>
   <a
      href="http://rads.stackoverflow.com/amzn/click/0060885599"
      target="_blank">Hardbound</a>
   </button>
   <button>
   <a
      href="http://rads.stackoverflow.com/amzn/click/0060885610"
      target="_blank">Paperback</a>
   </button>
</section>
<section
   class="wrapper">
   <a
      id="mainImage"
      class="floatLeft"
      href="http://rads.stackoverflow.com/amzn/click/B007EDOLJ2"
      target="_blank">
   <img
      height="160"
      width="107"
      src="http://images.amazon.com/images/P/B007EDOLJ2.01.MZZZZZZZ.jpg"
      alt="Andrew Solomon book cover"></img>
   </a>
   <div
      id="prizeCategory"
      class="category">General
      Nonfiction
   </div>
   <br/>
   <cite
      id="prizeTitle"
      class="title">Far
   From
   the
   Tree:
   Parents,
   Children,
   and
   the
   Search
   for
   Identity</cite>
   <br/>
   <div
      id="prizeArtist"
      class="author">Andrew
      Solomon
   </div>
   <br/>
   <button>
   <a
      href="http://rads.stackoverflow.com/amzn/click/B007EDOLJ2"
      target="_blank">Kindle</a>
   </button>
   <button>
   <a
      href="http://rads.stackoverflow.com/amzn/click/0743236718"
      target="_blank">Hardbound</a>
   </button>
   <button>
   <a
      href="http://rads.stackoverflow.com/amzn/click/0743236726"
      target="_blank">Paperback</a>
   </button>
</section>
<section
   class="wrapper">
   <a
      id="mainImage"
      class="floatLeft"
      href="http://rads.stackoverflow.com/amzn/click/B0062B0844"
      target="_blank">
   <img
      height="160"
      width="107"
      src="http://images.amazon.com/images/P/B0062B0844.01.MZZZZZZZ.jpg"
      alt="Robert Caro book cover"></img>
   </a>
   <div
      id="prizeCategory"
      class="category">Biography</div>
   <br/>
   <cite
      id="prizeTitle"
      class="title">The
   Passage
   of
   Power:
   The
   Years
   of
   Lyndon
   Johnson</cite>
   <br/>
   <div
      id="prizeArtist"
      class="author">Robert
      Caro
   </div>
   <br/>
   <button>
   <a
      href="http://rads.stackoverflow.com/amzn/click/B0062B0844"
      target="_blank">Kindle</a>
   </button>
   <button>
   <a
      href="http://rads.stackoverflow.com/amzn/click/0679405070"
      target="_blank">Hardbound</a>
   </button>
   <button>
   <a
      href="http://rads.stackoverflow.com/amzn/click/0375713255"
      target="_blank">Paperback</a>
   </button>
</section>
<section
   class="wrapper">
   <a
      id="mainImage"
      class="floatLeft"
      href="http://rads.stackoverflow.com/amzn/click/B0072NWK88"
      target="_blank">
   <img
      height="160"
      width="107"
      src="http://images.amazon.com/images/P/B0072NWK88.01.MZZZZZZZ.jpg"
      alt="Leanne Shapton book cover"></img>
   </a>
   <div
      id="prizeCategory"
      class="category">Autobiography</div>
   <br/>
   <cite
      id="prizeTitle"
      class="title">Swimming
   Studies</cite>
   <br/>
   <div
      id="prizeArtist"
      class="author">Leanne
      Shapton
   </div>
   <br/>
   <button>
   <a
      href="http://rads.stackoverflow.com/amzn/click/B0072NWK88"
      target="_blank">Kindle</a>
   </button>
   <button>
   <a
      href="http://rads.stackoverflow.com/amzn/click/0399158170"
      target="_blank">Hardbound</a>
   </button>
</section>
<section
   class="wrapper">
   <a
      id="mainImage"
      class="floatLeft"
      href="http://rads.stackoverflow.com/amzn/click/B008G16HVG"
      target="_blank">
   <img
      height="160"
      width="107"
      src="http://images.amazon.com/images/P/B008G16HVG.01.MZZZZZZZ.jpg"
      alt="Marina Warner book cover"></img>
   </a>
   <div
      id="prizeCategory"
      class="category">Criticism</div>
   <br/>
   <cite
      id="prizeTitle"
      class="title">Stranger
   Magic:
   Charmed
   States
   and
   the
   Arabian
   Nights</cite>
   <br/>
   <div
      id="prizeArtist"
      class="author">Marina
      Warner
   </div>
   <br/>
   <button>
   <a
      href="http://rads.stackoverflow.com/amzn/click/B008G16HVG"
      target="_blank">Kindle</a>
   </button>
   <button>
   <a
      href="http://rads.stackoverflow.com/amzn/click/0674055306"
      target="_blank">Hardbound</a>
   </button>
   <button>
   <a
      href="http://rads.stackoverflow.com/amzn/click/0099437694"
      target="_blank">Paperback</a>
   </button>
</section>
<section
   class="wrapper">
   <a
      id="mainImage"
      class="floatLeft"
      href="http://rads.stackoverflow.com/amzn/click/1555976050"
      target="_blank">
   <img
      height="160"
      width="107"
      src="http://images.amazon.com/images/P/1555976050.01.MZZZZZZZ.jpg"
      alt="D. A. Powell book cover"></img>
   </a>
   <div
      id="prizeCategory"
      class="category">Poetry</div>
   <br/>
   <cite
      id="prizeTitle"
      class="title">Useless
   Landscape,
   or
   A
   Guide
   for
   Boys</cite>
   <br/>
   <div
      id="prizeArtist"
      class="author">D.
      A.
      Powell
   </div>
   <br/>
   <button>
   <a
      href="http://rads.stackoverflow.com/amzn/click/1555976050"
      target="_blank">Hardbound</a>
   </button>
</section>
<div
   class="yearBanner">2011</div>
<section
   class="wrapper">(etc.)</section>

而BTW，yearBanner中的float-left ：我忘了增加CSS文件的版本号，所以它没有告诉我留下的可怕后果（我把它放回来）。

And BTW, the "float-left" in the yearBanner does matter: I forgot to increment the version number of the CSS file, and so it wasn't showing me the dire consequences of leaving that out (I put it back).

我的CSS的其他关键部分：

Other key parts of my CSS:

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* This added 7/12/2013 to allow for jQueryUI buttons without them being oversized - 
    the fiddle for it: http://jsfiddle.net/RFUsW/1/ */
.ui-button-text-only .ui-button-text {
    padding: .2em .5em;
    line-height: 1.2;
    font-size: 0.8em;
}



我更新了fiddling： http://jsfiddle.net/clayshannon/cMYEH/1/

这（来自 http://addyosmani.com/blog/building-spas-jquerys-best-friends/ ）看起来像一个有趣的替代方式：

This (from http://addyosmani.com/blog/building-spas-jquerys-best-friends/) looks like an interesting alternative way to do it:

<ul id="albumList"></ul>

var albums = [
 { Title: "My Vacation In Malibu", AlbumYear: "1993" },
 { Title: "A Trip To The Sea-side", AlbumYear: "1992" }
 ];
 //define the markup for our template
 var template_markup = "
<ul>
<li><b>${Title}</b> (${AlbumYear})</li>
</ul>
";
 //compile our markup above as a template called
 //'albumTemplate'
 $.template( "albumTemplate", template_markup );
 //render the template using 'albums' as our data
 //source then insert the HTML thats rendered under
 //the albumList element
 $.tmpl( "albumTemplate", albums )
 .appendTo( "#albumList" );

... https://github.com/BorisMoore/jquery-tmpl 说它是在活动开发或维护中不长的问题。问题仍然存在，但没有工作。这是有点可怕。

...but https://github.com/BorisMoore/jquery-tmpl says it is "BETA. NO LONGER IN ACTIVE DEVELOPMENT OR MAINTENANCE. Issues remain open but are not being worked." which is a bit scary.

另一个问题是：我仍然可以有我的条件逻辑，其中如果某个值是这样的，一个元素，否则不。

The other issue is: would I still be able to have my conditional logic, where if a certain value was such-and-such, create an element, otherwise do not.

考虑更改我的代码的诱惑部分是由codemania驱动的（inveterate，不可磨灭的驱动器tinker），但一部分是一个更好的理由，

The temptation to consider changing my code is partly driven by codemania (inveterate, indelible drive to tinker), but partly for a better reason, too: because this method may be more performant.

推荐答案

首先，我会清除第一本书。你可以用

First of all, I would clear the first book left. You can do that with

section.wrapper:first-child{
    clear: left;
}

然后，您应该可以找出所有元素的高度动态创建和设置所有元素到最大元素的高度，否则事情变得凌乱。当一个人在左边太高时，两个元素将会向右边移动，向左边元素的边浮动。

Then, you should probably find out the heights of all elements that you're dynamically creating, and set all elements to the height of the largest element, otherwise things get messy. When one is too tall on the left, two elements will end up to the right of it, floating up against the side of the left element.

我写了一些东西来找到最大元素的高度：

I wrote something to find the height of the largest element:

largest = 0;
$(".wrapper").each(function () {
    if ($(this).height() > largest) {
        largest = $(this).height();
    }
});

$(".wrapper").css("height", $largest);

将该代码放在此行后面：
}）; // getJSONNBCCJr

Place that code right after this line: }); //getJSONNBCCJr

最后，你应该真的浮动你的所有 .wrapper 和 display：block

Finally, you should really be floating all your .wrapper sections to the left, and display: block

这篇关于为什么我的动态HTML似乎随机放置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆