带填充的 CSS 跨度换行

Question

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

我做了一个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;
}

以类似的方式设计它。