css - 水平显示图像

Question

我正在阅读“使用 D3.js 构建数据可视化”一书，根据该书，以下代码应该在一行中显示至少 3 个图像。然而，我的代码显示所有东西都垂直堆叠在一起。我缺少的是书中没有教的内容。

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");

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

<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>

Answer 1

您只需声明此样式即可:

.flowers {
  display: inline-block;
}

所有的 block 都将排在一行中(如果可用空间足够的话):

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");

        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;
        }
        
        img {
          width: 100px;
          height: auto;
        }
        
        .flowers {
          display: inline-block;
        }

<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="https://www.almanac.com/sites/default/files/image_nodes/hydrangea-1715775_640_copy.jpg"/>
        <p>Sun</p>
      </div>
          <div class="flowers">
        <h2>Hydrangia</h2>
        <p><i>Hydrangea</i></p>
        <img src="https://www.almanac.com/sites/default/files/image_nodes/hydrangea-1715775_640_copy.jpg"/>
        <p>Sun</p>
      </div>
          <div class="flowers">
        <h2>Hydrangia</h2>
        <p><i>Hydrangea</i></p>
        <img src="https://www.almanac.com/sites/default/files/image_nodes/hydrangea-1715775_640_copy.jpg"/>
        <p>Sun</p>
      </div>
          <div class="flowers">
        <h2>Hydrangia</h2>
        <p><i>Hydrangea</i></p>
        <img src="https://www.almanac.com/sites/default/files/image_nodes/hydrangea-1715775_640_copy.jpg"/>
        <p>Sun</p>
      </div>
          <div class="flowers">
        <h2>Hydrangia</h2>
        <p><i>Hydrangea</i></p>
        <img src="https://www.almanac.com/sites/default/files/image_nodes/hydrangea-1715775_640_copy.jpg"/>
        <p>Sun</p>
      </div>
    </div>