Question

我的代码有3列。我想拥有每列的边框，每列也有自己的颜色。我尝试了许多以前的多列css问题的例子，但它们不起作用。例如，我不想使用背景图像的脏技术来渲染背景颜色和边框，因为网站允许更改颜色。此外，我不能使用厚边框作为颜色的方法，然后使用负边距与相对定位。该方法不允许边界。下面是代码。什么是最好的方法？感谢

<div id="results" style="display:block;float:left;width:210px;border:1px solid black;">
 <span id="left" style="display:block;float:left;width:140px;border-right:1px solid black;">This is a long text and can be wrap to many lines</span>
 <span id="middle" style="display:block;float:left;width:30px;border-right:1px solid black;">3:32</span>
 <span id="right" style="display:block;float:left;width:30px;">Click</span>
</div>

Answer 1

为什么只添加所有范围height: 100%;和顶部div height: auto;？

顺便说一句，我很确定span display:block; div为{{1}}。

BTW2：表格标签未被禁止 - 当您需要带有“表格数据”的表格（例如日程表）时，您应该使用它。 ;）如果您构建所有网站的布局，请不要...

Answer 2

<div id="results" style="height:150px;float:left;width:210px;border:1px solid black;">
<span id="left" style="height:auto !important;height:100%;min-height:100%;float:left;width:140px;border-right:1px solid black;">
This is a long text and can be wrap to many lines
</span>
<span id="middle" style="height:auto !important;height:100%;min-height:100%;float:left;width:30px;border-right:1px solid black;">
3:32
</span>
<span id="right" style="height:auto !important;height:100%;min-height:100%;float:left;width:30px;">
Click
</span>
</div>

唯一的问题是容器必须设置高度。

Answer 3

就像MaRiz所说，在这种情况下你应该使用一个表并设置CSS属性：border-collapse：collapse;

具有多列的SPAN上的高度100％

3 个答案: