¿Por qué mi HTML dynamic aparece aparentemente al azar?

Quiero que mi html generado dinámicamente se alinee, sin embargo, lo que obtengo es un poco loose-goosey:

enter image description here

Aquí está mi jQuery:

function getNatlBookCritics() { var htmlBuilder = ''; $.getJSON('Content/NBCCJr.json', function (data) { $.each(data, function (i, dataPoint) { if (IsYear(dataPoint.category)) { htmlBuilder += '
' + dataPoint.category + '
'; } else { htmlBuilder += '
' + '
' + dataPoint.category + '

' + dataPoint.title + '
' + dataPoint.author + '

'; if (dataPoint.kindle.length > 2) { htmlBuilder += ''; } if (dataPoint.hardbound.length > 2) { htmlBuilder += ''; } if (dataPoint.paperback.length > 2) { htmlBuilder += ''; } htmlBuilder += '
'; } }); //each $('#BooksContent').append(htmlBuilder); $('#BooksContent').css('background-color', 'black'); }); //getJSONNBCCJr } // getNatlBookCritics()

… y aquí está el CSS relacionado:

 .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; } 

ACTUALIZAR

En una nota relacionada, ¿hay alguna razón por la que debería cambiar este código?

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

…a:

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

ACTUALIZACIÓN 2

De acuerdo, aquí por fin está el HTML ilustre pero defectuoso; Sé que no es bonita, pero también hay un jsfiddle aquí: http://jsfiddle.net/clayshannon/cMYEH/1/ Lo obtuve a través de console.log (htmlBuilder);

 
2012
Ben Fountain book cover
Fiction

Billy Lynn's Long Halftime Walk
Ben Fountain

Andrew Solomon book cover
General Nonfiction

Far From the Tree: Parents, Children, and the Search for Identity
Andrew Solomon

Robert Caro book cover
Biography

The Passage of Power: The Years of Lyndon Johnson
Robert Caro

Leanne Shapton book cover
Autobiography

Swimming Studies
Leanne Shapton

Marina Warner book cover
Criticism

Stranger Magic: Charmed States and the Arabian Nights
Marina Warner

DA Powell book cover
Poetry

Useless Landscape, or A Guide for Boys
DA Powell

2011
(etc.)

Y por cierto, el “float-left” en el yearBanner importa: me olvidé de incrementar el número de versión del archivo CSS, por lo que no me mostró las graves consecuencias de dejarlo fuera (lo puse de nuevo).

Otras partes clave de mi 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; } 

Actualicé el violín: http://jsfiddle.net/clayshannon/cMYEH/1/

ACTUALIZACIÓN 3

Esto (de http://addyosmani.com/blog/building-spas-jquerys-best-friends/ ) parece una forma alternativa interesante de hacerlo:

 
    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 = "
    • ${Title} (${AlbumYear})
    "; //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" );

    … pero https://github.com/BorisMoore/jquery-tmpl dice que es “BETA. NO MÁS EN DESARROLLO ACTIVO O MANTENIMIENTO. Los problemas permanecen abiertos pero no se están trabajando”. que es un poco aterrador.

    El otro problema es: ¿todavía podría tener mi lógica condicional, donde si un cierto valor es tal y tal, crear un elemento, de lo contrario no lo haga.

    La tentación de considerar cambiar mi código está en parte impulsada por la codemanía (empeño inveterado e indeleble por el tinker), pero en parte también por una razón mejor: porque este método puede ser más eficaz.

    Antes que nada, borraría el primer libro que queda. Puedes hacer eso con

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

    Entonces, probablemente debas averiguar las alturas de todos los elementos que estás creando dinámicamente, y establecer todos los elementos a la altura del elemento más grande, de lo contrario las cosas se pondrán complicadas. Cuando uno es demasiado alto a la izquierda, dos elementos terminarán a la derecha del mismo, flotando contra el lado del elemento izquierdo.

    Escribí algo para encontrar la altura del elemento más grande:

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

    Coloque ese código justo después de esta línea: }); //getJSONNBCCJr }); //getJSONNBCCJr

    Finalmente, deberías estar flotando todas tus secciones .wrapper a la izquierda, y display: block

    Realice los siguientes cambios en css:

     .ui-button-text-only .ui-button-text { padding: .2em .5em; line-height: 1.2; font-size: 0.8em; float: left; 

    }

     .yearBanner { font-size: 2em; color: white; /*font-family: Verdana, Arial, Helvetica, sans-serif;*/ font-family: 'Segoe UI Light', Candara, Calibri, Consolas, sans-serif; width:500px; padding-top: 50px; margin-left:50px; padding-bottom:20px; 

    }
    Agregue el siguiente css:

     .wrapper{ float: left; width: 500px; margin-left:20px; padding-bottom:20px; 

    }
    Nota: asegúrese de que el ancho de .yearBanner y .wrapper sea ​​el mismo si cambia el ancho de una clase y luego debe cambiar también por otra. configurado de acuerdo con su resolución de pantalla porque he probado en jsfiddle por eso lo he configurado en 500px, puede cambiarlo.