带填充的 CSS 跨度换行

Question

我有一个很烦人的问题。
我必须制作一个包含 3 个相邻元素的“表格”。前 2 个元素是简单的 div，向左 float ，但第三个元素有点复杂。它必须在每一边都有填充。顺便说一下，它是一个可以在行尾换行的文本。
我的问题是，当这个元素在第一行的末尾和第二行的开头中断时，没有填充属性。

我做了一个 simple example page这里。

你对我有什么解决办法吗？我尝试了很多不同的方法...
当第三个元素旁边的空间为空时，没关系，但是当我在盒子前面加上它时，它就完全坏了。

Answer 1

你需要宽度是动态的还是可以固定大小？我会删除跨度， float div.inner 并对其宽度进行硬编码。像这样的东西:

.container {
   overflow: hidden;
}

.inner {
   float: left;
   padding: 7px;
   width: 106px; /* you could use percentages to fix the widths if you'd like to keep things dynamic. */
}

您可以只调整填充并避免一起设置边框。在容器上将溢出设置为隐藏将强制容器元素适合其中的所有 float 元素。这允许您避免插入 div 来清除 float 元素。

您也可以将其表示为嵌套列表，因为最好避免不必要的 div:

<ol id="examples_list">
  <li>
    <ul class="container">
      <li class="box">...</li>
      <li class="box">...</li>
      <li class="inner">...</li>
    </ul>
  </li>
</ol>

和...

#examples_list, #examples_list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

以类似的方式设计它。