D3.js图片横向排列异常：代码未实现单行显示3张及以上图片

我正在学习《Building Data Visualizations with D3.js》一书，根据书中内容，以下代码应能在一行显示至少3张图片，但实际运行时所有内容均垂直堆叠。请问我遗漏了哪些书中未提及的内容？

相关代码 #

D3.js 代码

var flowers = [{ "name": "Hydrangia", "latin": "Hydrangea", "light": "Sun", "ease": 3 }, { "name": "Chrysanthemum", "latin": "Chrysanthemum", "light": "Part Sun", "ease": 1 }, { "name": "Peony", "latin": "Paeonia", "light": "Part Sun", "ease": -1 }, { "name": "Orchid", "latin": "Paeonia", "light": "Shade", "ease": -5 }, { "name": "Fern", "latin": "Dryopteris", "light": "Shade", "ease": 5 }];
// Part 1
// Creating elements
var div = d3.select("div#content")
 .selectAll("div")
 .data(flowers)
 .enter().append("div").attr("class", "flowers");

CSS 样式

body {
 font-size: 16px;
 line-height: 1.5em;
 color: #333333;
 font-family: 'Helvetica Neue', Helvetica, sans-serif;
}
div#content {
 margin: auto;
 width: 800px;
}
div#content > h1 {
 margin: 20px;
 text-align: center;
}
div#content > div.flower > * {
 margin: 0;
}
div#content div.flower {
 display: inline-block;
 padding: 15px 20px;
 margin: 10px;
 vertical-align: top;
}
div#content div.flower > img {
 width: 200px;
}

HTML 结构

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="content">
 <h1>My Favorite Flowers</h1>
 <div class="flowers">
 <h2>Hydrangia</h2>
 <p><i>Hydrangea</i></p>
 <img src="img/hydrangia.jpg" />
 <p>Sun</p>
 </div>
 <div class="flowers">
 <h2>Hydrangia</h2>
 <p><i>Hydrangea</i></p>
 <img src="img/hydrangia.jpg" />
 <p>Sun</p>
 </div>
 <div class="flowers">
 <h2>Hydrangia</h2>
 <p><i>Hydrangea</i></p>
 <img src="img/hydrangia.jpg" />
 <p>Sun</p>
 </div>
 <div class="flowers">
 <h2>Hydrangia</h2>
 <p><i>Hydrangea</i></p>
 <img src="img/hydrangia.jpg" />
 <p>Sun</p>
 </div>
 <div class="flowers">
 <h2>Hydrangia</h2>
 <p><i>Hydrangea</i></p>
 <img src="img/hydrangia.jpg" />
 <p>Sun</p>
 </div>
</div>

问题分析与解决方案 #

核心问题是类名不匹配，导致你的CSS样式根本没有应用到目标元素上：

1. 你的D3代码给生成的div添加的类是flowers（复数），但CSS里所有的选择器使用的是flower（单数），比如div#content div.flower。因为类名不匹配，浏览器不会把display: inline-block这个关键样式应用到这些div上，而div默认是display: block，会独占一行，所以全部垂直堆叠。
2. 你静态HTML里的div类名也是flowers，同样无法被CSS的.flower选择器选中。

修正步骤：

• 统一类名：选择其中一种类名，保持D3代码、CSS、HTML一致。比如：
  • 方案一：修改D3代码和静态HTML，把类名改成flower（单数）：
    • D3代码：append("div").attr("class", "flower")
    • HTML里的<div class="flowers">改成<div class="flower">
  • 方案二：修改CSS，把所有.flower选择器改成.flowers：
    • 比如把div#content div.flower改成div#content div.flowers，div#content > div.flower > *改成div#content > div.flowers > *等。

完成修改后，display: inline-block样式会正确应用到每个花卉卡片上，它们就会在一行内排列（超出容器宽度时会自动换行）。

另外，你可以检查一下容器div#content的宽度（现在是800px），每张卡片的宽度大概是200px（图片）+ 152（左右padding）+102（左右margin）= 250px左右，800px宽度刚好能放下3张（250*3=750px），符合你“一行至少3张”的需求。

内容的提问来源于stack exchange，提问作者charlie