带有填充的CSS span包装

Question

我有一个非常讨厌的问题。 我必须制作一个“表格”，其中包含3个彼此相邻的元素。前两个元素是简单的div，向左浮动，但第三个有点复杂。它必须在每一侧都有填充物。顺便说一句，它是一个可以在行尾包装的文本。 我的问题是当这个元素在第一行的末尾断开而第二行的开头没有填充属性时。

我在这里做了simple example page。

你有什么解决方案吗？我尝试了很多不同的方式...... 当第三个元素旁边的空格为空时，它没关系，但是当我在前面添加它时它完全坏了。

Answer 1

您需要宽度是动态的还是可以固定大小？我会删除跨度，浮动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. */
}

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

您也可以将其表示为嵌套列表，因为最好避免不必要的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;
}

以类似的方式设计它。

Answer 2

好的，基于@b_benjamin对上述评论的回应，我想我可能有一个可能的解决方案，但我也认为它将依赖于一些在旧版浏览器中可能效果不佳的CSS，但它可能是一个简单的概念用其他技巧调整。

这似乎适用于最新的FF，Chrome和IE9。

首先，HTML：

<div style="width:340px;">
    <!-- a list of text, with some time's marked up -->
    <ul class="sched">
        <li><b>17:55</b><b>18:10</b> <a href="#">Lorem ipsum dolor</a> sit posuere.</li>
        <li><b>18:20</b><b>18:30</b> <a href="#">Lorem ipsum dolor</a> sit amet orci aliquam.</li>
        <li><b>18:20</b><b>18:30</b> <a href="#">Class aptent</a> taciti sociosqu ad sed ad.</li>
        <li><b>19:05</b><b>19:17</b> <a href="#">Mauris et urna et</a> ante suscipit ultrices sed.</li>
        <li><b>19:05</b><b>19:17</b> <a href="#">Proin vulputate pharetra tempus.</a> Quisque euismod tortor eget sapien blandit ac vehicula metus metus.</li>
    </ul>
</div>

现在有些CSS：（我使用了基于b_benjamin的样本照片的简单颜色主题）

/* reset default list styles */
.sched, .sched li{
    list-style:none; 
    font-size:14px; 
    padding:0;
    margin:0; 
}
.sched li{
    position:relative; 
    padding:0 10px;

    margin:10px 0; 
    background:#631015; 
    color:#FFF; 
}
.sched b{
    position:relative; 
    left:-10px; 
    display:inline-block;

    padding:2px 10px; 
    font-weight:none; 
    background:#FFF; 
    color:#666; 

}
/* some light styling for effect */
body{ 
    background:#cc222c; 
} 
.sched li a{ 
    color:#FF9; 
}

<强>解释

box model需要一个关于如何在内联元素（文本）上实现填充的思考过程。你可以做的一件事就是在整个收纳盒周围加上填充物。

在我的概念中，我使用了UL列表，每个LI元素都是容器。我在容器上使用了10px填充物。

.sched li{
    padding:0 10px;
}

这将为我们提供填充，但它会使我们的“时间”元素也具有此填充。我的“技巧”是通过使用等于填充的负相对位置来“修复”这个：

.sched b{
    display:inline-block; /* make these items act like block level elements */
    position:relative; /* give the b elements a relative position*/
    left:-10px; /* offset them equal to the padding */
}

还有最后一件事要做，那就是确保父元素也是position：relative所以子元素将使用它包含的维度：

.sched li{
    position:relative; /* needed for B elements to be offset properly */
    padding:0 10px;
}

以下是Chrome浏览器的内容。

当然，你可以玩填充。可能还有一些解决方案可以使“B”元素浮动，但这似乎运作良好。

我希望有所帮助！

Answer 3

本，    我不明白为什么你会在同一个元素周围使用两个跨度。此外，由于他们的浮躁，我很少使用跨度。根据我的理解，你想要3个积木并排坐在最后一个元素上进行填充。

我建议只在padded div（或id）中添加一个额外的类。

试试这个......

[HTML]

<h2>double span with floated elements next to it</h2>
 <div class="box">box #1</div>
 <div class="box">box #2</div>
 <div class="box boxPadded">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus laoreet.
 </div>
 <div class="cleaner"></div>

[CSS]

.cleaner{clear: left; line-height: 0; height: 0;} 
.box{margin-right: 5px; width: 100px; min-height: 25px; float: left;}
.boxPadded{padding: 3px 3px 9px 3px; word-wrap: break-word;}

所以，现在第三个元素具有“box”类的属性以及它自己的单独属性“boxPadded”。

“min-height”主要针对第三个元素。你实际上可以把它放在boxPadded类中，但我有点懒。如果文本大于元素，它将允许元素拉长。

“漂浮”是我在浮动元素后使用的东西。除非你在浮动元素中有元素，否则通常不需要它。

“自动换行”将允许一个比元素长的非空格字符串环绕框。