【发布时间】：2010-09-07 08:45:30
【问题描述】：
<div> 标签的问题
工作正常： 文本“Whatever”在第 1 列，后跟一个单选按钮：
也可以正常工作（没有带文本的单选按钮）：
文本“Whatever”之后的下一个单元格应显示在下一行的第 1 列 - 而不是直接显示在文本下方。
背景：
表格结构是由我的 html 助手制作的。他生成 asp.net MVC2 代码以在表格结构中显示带有图像（！）的单选按钮。
html 帮助器采用一些值，例如：生成一个表格，在两列中包含五个单选按钮，并添加一个带有文本“Whatever”的单选按钮。 （当然需要 html 助手一些额外的值，但这不是问题......）
表格是用<div> 标签（根本没有<table> 标签！）。
我使用样式“宽度：50%；”对于有两列和“float:left;”的表。
一切都很好 - 直到带有文本（并且没有任何图像）的单选按钮应该显示在最后一列中。参见示例图 2：“文本单选按钮”之后的单选按钮（带有 3 个图像）应显示在第一列而不是文本下方。
我做错了什么？
附加信息：在 IE 和 firefox 中的行为相同。
提前致谢！
感谢您的快速回复！ 根据要求：
<div id="stars" style="width: 860px; border: solid 2px #000000; background-color:#CCCCCC;" >
<div id="div0" style="width: 50.0%; float: left;" >
<input name="radioButtonName" id="idPrefix0" type="radio" text="6" value="false" />
<label for="idPrefix0">
<img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="6" >
<img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="6" >
<img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="6" >
<img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="6" >
<img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="6" >
<img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="6" >
</label>
</div>
<div id="div1" style="width: 50.0%; float: left;" >
<input name="radioButtonName" id="idPrefix1" type="radio" text="2" value="false" />
<label for="idPrefix1">
<img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="2" >
<img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="2" >
</label>
</div>
<div id="div2" style="width: 50.0%; float: left;" >
<input name="radioButtonName" id="idPrefix2" type="radio" text="5" value="false" />
<label for="idPrefix2">
<img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="5" >
<img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="5" >
<img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="5" >
<img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="5" >
<img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="5" >
</label>
</div>
<div id="div3" style="width: 50.0%; float: left;" >
<input name="radioButtonName" id="idPrefix3" type="radio" text="1" value="false" />
<label for="idPrefix3">
<img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="1" >
</label>
</div>
<div id="div4" style="width: 50.0%; float: left;" >
<input name="radioButtonName" id="idPrefix4" type="radio" text="4" value="false" />
<label for="idPrefix4">
<img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="4" >
<img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="4" >
<img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="4" >
<img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="4" >
</label>
</div>
<div id="div5" style="width: 50.0%; float: left;" >
<input name="radioButtonName" id="idPrefix5" type="radio" text="-1" value="false" />
<label for="idPrefix5">
Whatever
</label>
</div>
<div id="div6" style="width: 50.0%; float: left;" >
<input name="radioButtonName" id="idPrefix6" type="radio" text="3" value="false" />
<label for="idPrefix6">
<img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="3" >
<img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="3" >
<img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="3" >
</label>
</div>
<div id="div7" style="width: 50.0%; float: left;" >
 
</div>
</div>
变得奇怪（第一眼）：
但可以解释：考虑一个链：将带有 5 个图像的单元格/单选按钮拉到“右侧的两个位置/列”（它应该在哪里），并想象所有随后的单元格/单选按钮都会跟随。然后一切都会在正确的地方。 ;-)
【问题讨论】：
-
你能把 html + css 贴出来吗？
标签： html css asp.net-mvc-2