Question

<div>代码

的问题

工作正常：文本“Whatever”在第1列中，后面是radiobutton： alt text

工作也很好（没有带文字的单选按钮）： alt text

文本“Whatever”之后的下一个单元格应显示在下一行的第1列中 - 而不是直接在文本下方。 alt text

背景：

表结构由我的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;" >
        &nbsp
    </div>
</div>

变得奇怪（第一眼看）： alt text

但可以解释：想想一个链：用5个图像“向右两个位置/列”（应该在哪里）拉出单元格/单选按钮，并想象所有后面的单元格/单选按钮都会跟随。然后一切都会在正确的地方。 ; - ）

Answer 1

是的，回答自己的问题很愚蠢...但我想分享我发现的东西; - ）

有一个“包装”div - 标签丢失，表示“采用以下嵌套的div标签并构建一个完整的行！”

  <div style="width:100%;">

更改后的代码：

<div id="stars" style="width: 860px; border: solid 2px #000000; background-color:#CCCCCC;" >


    <div style="width:100%;">


        <div id="div0" style="width: 33.333333333333333333333333333%; 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: 33.333333333333333333333333333%; float: left;" >
            <input name="radioButtonName" id="idPrefix1" type="radio" text="3" value="false" />
            <label for="idPrefix1">
                <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="div2" style="width: 33.333333333333333333333333333%; float: left;" >
            <input name="radioButtonName" id="idPrefix2" type="radio" text="-1" value="false" />
            <label for="idPrefix2">
            Whatever
            </label>
        </div>


    </div>
    <div style="width:100%;">


        <div id="div3" style="width: 33.333333333333333333333333333%; float: left;" >
            <input name="radioButtonName" id="idPrefix3" type="radio" text="5" value="false" />
            <label for="idPrefix3">
                <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="div4" style="width: 33.333333333333333333333333333%; float: left;" >
            <input name="radioButtonName" id="idPrefix4" type="radio" text="2" value="false" />
            <label for="idPrefix4">
                <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="div5" style="width: 33.333333333333333333333333333%; float: left;" >
            &nbsp
        </div>


    </div>
    <div style="width:100%;">


        <div id="div6" style="width: 33.333333333333333333333333333%; float: left;" >
            <input name="radioButtonName" id="idPrefix6" type="radio" text="4" value="false" />
            <label for="idPrefix6">
                <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="div7" style="width: 33.333333333333333333333333333%; float: left;" >
            <input name="radioButtonName" id="idPrefix7" type="radio" text="1" value="false" />
            <label for="idPrefix7">
                <img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="1" />
            </label>
        </div>
        <div id="div8" style="width: 33.333333333333333333333333333%; float: left;" >
            &nbsp
        </div>


    </div>


</div>

asp-net MVC2：<div>标签 - “float：left;” - 问题？</div>

1 个答案: