为什么我的动态HTML看似随意放置？
我希望我的动态生成的html能够对齐，但我得到的是一个有点松散的goosey：
这是我的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：
.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;
}
更新
在相关的说明中，我有什么理由要更改此代码：
}); //each
$('#BooksContent').append(htmlBuilder);
$('#BooksContent').css('background-color', 'black');
$('button').button();
}); //getJSONNBCCJr
...为：
}); //each
}); //getJSONNBCCJr
$('#BooksContent').append(htmlBuilder);
$('#BooksContent').css('background-color', 'black');
$('button').button();
更新2
好的，这里终于有了显赫但有缺陷的HTML;我知道它不漂亮，但这里也有一个jsfiddle：http://jsfiddle.net/clayshannon/cMYEH/1/我通过console.log（htmlBuilder）得到它;
<div
class="yearBanner">2012</div>
<section
class="wrapper">
<a
id="mainImage"
class="floatLeft"
href="https://rads.stackoverflow.com/amzn/click/com/B00655KLOY" rel="nofollow noreferrer"
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="https://rads.stackoverflow.com/amzn/click/com/B00655KLOY" rel="nofollow noreferrer"
target="_blank">Kindle</a>
</button>
<button>
<a
href="https://rads.stackoverflow.com/amzn/click/com/0060885599" rel="nofollow noreferrer"
target="_blank">Hardbound</a>
</button>
<button>
<a
href="https://rads.stackoverflow.com/amzn/click/com/0060885610" rel="nofollow noreferrer"
target="_blank">Paperback</a>
</button>
</section>
<section
class="wrapper">
<a
id="mainImage"
class="floatLeft"
href="https://rads.stackoverflow.com/amzn/click/com/B007EDOLJ2" rel="nofollow noreferrer"
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="https://rads.stackoverflow.com/amzn/click/com/B007EDOLJ2" rel="nofollow noreferrer"
target="_blank">Kindle</a>
</button>
<button>
<a
href="https://rads.stackoverflow.com/amzn/click/com/0743236718" rel="nofollow noreferrer"
target="_blank">Hardbound</a>
</button>
<button>
<a
href="https://rads.stackoverflow.com/amzn/click/com/0743236726" rel="nofollow noreferrer"
target="_blank">Paperback</a>
</button>
</section>
<section
class="wrapper">
<a
id="mainImage"
class="floatLeft"
href="https://rads.stackoverflow.com/amzn/click/com/B0062B0844" rel="nofollow noreferrer"
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="https://rads.stackoverflow.com/amzn/click/com/B0062B0844" rel="nofollow noreferrer"
target="_blank">Kindle</a>
</button>
<button>
<a
href="https://rads.stackoverflow.com/amzn/click/com/0679405070" rel="nofollow noreferrer"
target="_blank">Hardbound</a>
</button>
<button>
<a
href="https://rads.stackoverflow.com/amzn/click/com/0375713255" rel="nofollow noreferrer"
target="_blank">Paperback</a>
</button>
</section>
<section
class="wrapper">
<a
id="mainImage"
class="floatLeft"
href="https://rads.stackoverflow.com/amzn/click/com/B0072NWK88" rel="nofollow noreferrer"
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="https://rads.stackoverflow.com/amzn/click/com/B0072NWK88" rel="nofollow noreferrer"
target="_blank">Kindle</a>
</button>
<button>
<a
href="https://rads.stackoverflow.com/amzn/click/com/0399158170" rel="nofollow noreferrer"
target="_blank">Hardbound</a>
</button>
</section>
<section
class="wrapper">
<a
id="mainImage"
class="floatLeft"
href="https://rads.stackoverflow.com/amzn/click/com/B008G16HVG" rel="nofollow noreferrer"
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="https://rads.stackoverflow.com/amzn/click/com/B008G16HVG" rel="nofollow noreferrer"
target="_blank">Kindle</a>
</button>
<button>
<a
href="https://rads.stackoverflow.com/amzn/click/com/0674055306" rel="nofollow noreferrer"
target="_blank">Hardbound</a>
</button>
<button>
<a
href="https://rads.stackoverflow.com/amzn/click/com/0099437694" rel="nofollow noreferrer"
target="_blank">Paperback</a>
</button>
</section>
<section
class="wrapper">
<a
id="mainImage"
class="floatLeft"
href="https://rads.stackoverflow.com/amzn/click/com/1555976050" rel="nofollow noreferrer"
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="https://rads.stackoverflow.com/amzn/click/com/1555976050" rel="nofollow noreferrer"
target="_blank">Hardbound</a>
</button>
</section>
<div
class="yearBanner">2011</div>
<section
class="wrapper">(etc.)</section>
顺便说一下，yearBanner 中的“float-left”确实很重要：我忘了增加CSS文件的版本号，所以它没有告诉我离开的可怕后果那个（我把它放回去）。
我的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;
}
我更新了小费：http://jsfiddle.net/clayshannon/cMYEH/1/
更新3
这（来自http://addyosmani.com/blog/building-spas-jquerys-best-friends/）看起来像是一种有趣的替代方法：
<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表示它是“BETA。没有更长时间的积极开发或维护。问题仍未解决，但尚未奏效。”这有点可怕。
另一个问题是：我是否仍然可以拥有我的条件逻辑，如果某个值是这样的，那么创建一个元素，否则不会。
考虑更改我的代码的诱惑部分是由于codemania（inveterate，不可磨灭的修补程序驱动），但部分是由于更好的原因：因为这种方法可能更具性能。
2 个答案:
答案 0 :(得分：3)
首先，我会清除第一本书。你可以用
做到这一点section.wrapper:first-child{
clear: left;
}
然后，你应该找出你动态创建的所有元素的高度，并将所有元素设置为最大元素的高度，否则事情会变得混乱。当一个人在左边太高时，两个元素将在它的右边结束，向上漂浮在左边元素的一侧。
我写了一些东西来找到最大元素的高度：
largest = 0;
$(".wrapper").each(function () {
if ($(this).height() > largest) {
largest = $(this).height();
}
});
$(".wrapper").css("height", $largest);
将该代码放在此行之后：
}); //getJSONNBCCJr
最后，您应该将所有.wrapper部分悬浮在左侧，display: block
答案 1 :(得分：3)
在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;
}
添加以下css：
.wrapper{
float: left;
width: 500px;
margin-left:20px;
padding-bottom:20px;
}
注意：如果您更改一个类的宽度，那么确保 .yearBanner 和 .wrapper 的宽度相同，那么您应该更改为另一个也。根据你的屏幕分辨率设置，因为我已经在jsfiddle中进行了测试，这就是为什么我将它设置为500px你可以改变它。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？