html - 宽度未知的两列 CSS 表格样式

Question

我想想出一个 CSS 来做这种样式:

|Short Text                31231|
|longlonglonglonglonglo      331|
|ng text                        |

但使用我当前的 CSS，会发生以下情况:

|Short Text                31231|   
|longlonglonglonglonglong text  |    
|                            331|

如您所料，我在左右浮动，但我不知道右栏的宽度。不同行的不同宽度是可能的并被接受，我不需要左右列之间的全局边框。

我希望左边占据尽可能多的空间，而不是进入右边的区域。

注意:我不能使用表格，因为这是一个外部库，我必须逐行定义 html。

Answer 1

将它们的宽度设置为 50%。例子: http://jsfiddle.net/52R8R/

CSS

.b{
width:50%;
float:left;
}
.c{
width:50%;
float:right;
}

HTML

<div class="b">aaaaaaaaaaaaaaaaaaaa</div>
<div class="c">11111</div>
<div class="b">aaaa</div>
<div class="c">11111</div>

编辑:考虑到您的评论，这应该有效:

.c
{
float:right; 
border-style:solid; 
}
.b
{
border-style:solid; 
background-color:blue; 
overflow:hidden; 
}

注意:你已经把你的 div 设置为 <div class="c">在 b 之前。