html - CSS 换行 的问题

Question

我有这个数据:

<div id="results">
  <span id="row">
    <span id="left">left column</span>
  <span id="middle">middle text</span>
  <span id="right">right stuff</span>
  </span>
</div>

我正在尝试模仿这个:

这是我的 CSS 代码:

#results {
  width: 700px;
  margin: 0px auto;
  border: 1px solid black;
}

#row {
  width: 85%;
  margin: 0px auto;
  border: 2px solid green;
}

#left {
  float: left;
  width: 200px;
  margin: 5px 5px 5px 5px;
  border: 1px solid blue;
}

#middle {
  float: left;
  width: 200px;
  margin: 5px 5px 5px 5px;
  border: 1px solid blue;
}

#right {
  float: left;
  width: 200px;
  margin: 5px 5px 5px 5px;
  border: 1px solid blue;
}

<div id="results">
  <span id="row">
        <span id="left">left column</span>
  <span id="middle">middle text</span>
  <span id="right">right stuff</span>
  </span>
</div>

问题是，结果是这样的!

它看起来不错，除了右侧跨度 block 的右侧，那里的绿色 block 应该是 #row 包装器。为什么它没有按应有的方式包装？

Answer 1

定义 display:block 或 display:inline-block 到你的 #row span 因为 span 是一个 内联元素，默认情况下不采用 width 和 height。

检查这个http://jsfiddle.net/2xufx/