html - 从左到右定位一定数量的div，然后在下部再次从左到右定位

我有一定数量的动态生成的#divs，它们具有已知的.className(全部具有相同的className)但未知的ID。我想固定 #divs 的大小(宽度，高度)，然后从左到右显示它们，在一行中显示它们，如果它不适合该行则显示到下一行。我试过 (float : left ) ，但是最后一个 div 下面的元素也显示在左侧并且看起来很丑 + div 的大小不同(它们的文本长度可变)。什么是 css 属性以及如何设置它来为我做魔法....

我不确定，但我认为应该通过为类定义某种形式的定位(绝对、相对等)来解决这个问题。

<html>
    <head>
        <style>
            .wrapperDiv{
                overflow:auto;
                background-color:green;
                position:relative;
            }

            .column{
                background-color:aqua;
                width:20em;
                height:20em;
                float:left;
                margin:2px;
            }
        </style>
    </head>
    <body>
    <form>
        <div class="wrapperDiv">
            <table class="column">
                                    <tr><td>Name<hr/></td></tr><tr><td>DataType :</td><td><select name="Name_dataType" class="dataType" onchange="typeChanged(this)" ><option value="text" selected="true" > Text </option><option value="number"  > Number </option><option value="date"  > Date </option></select></td></tr>
                                    <tr><td>Equals:</td><td> <input type="text" name="Name_equals"/></td></tr> <br/><tr><td>Contains:</td><td> <input type="text" name="Name_contains"/></td></tr><br/>
                                    </table> 

            <table class="column">
                                    <tr><td>Name<hr/></td></tr><tr><td>DataType :</td><td><select name="Name_dataType" class="dataType" onchange="typeChanged(this)" ><option value="text" selected="true" > Text </option><option value="number"  > Number </option><option value="date"  > Date </option></select></td></tr>
                                    <tr><td>Equals:</td><td> <input type="text" name="Name_equals"/></td></tr> <br/><tr><td>Contains:</td><td> <input type="text" name="Name_contains"/></td></tr><br/>
                                    </table> 

            <table class="column">
                                    <tr><td>Name<hr/></td></tr><tr><td>DataType :</td><td><select name="Name_dataType" class="dataType" onchange="typeChanged(this)" ><option value="text" selected="true" > Text </option><option value="number"  > Number </option><option value="date"  > Date </option></select></td></tr>
                                    <tr><td>Equals:</td><td> <input type="text" name="Name_equals"/></td></tr> <br/><tr><td>Contains:</td><td> <input type="text" name="Name_contains"/></td></tr><br/>
            </table> 

            <table class="column">
                                    <tr><td>DATE_OF_BIRTH<hr/></td></tr><tr><td>DataType :</td><td><select name="DATE_OF_BIRTH_dataType" class="dataType" onchange="typeChanged(this)" ><option value="text"  > Text </option><option value="number"  > Number </option><option value="date" selected="true" > Date </option></select></td></tr>
                                    <tr><td>Equals:</td><td> <input type="text" name="DATE_OF_BIRTH_equals"/></td></tr> <br/><tr><td>Greater_Then:</td><td> <input type="text" name="DATE_OF_BIRTH_greaterThen"/></td></tr><br/><tr><td>Less_Then:</td><td> <input type="text" name="DATE_OF_BIRTH_lessThen"/></td></tr><br/>
            </table> 
            <table class="column">
                                    <tr><td>DATE_OF_BIRTH<hr/></td></tr><tr><td>DataType :</td><td><select name="DATE_OF_BIRTH_dataType" class="dataType" onchange="typeChanged(this)" ><option value="text"  > Text </option><option value="number"  > Number </option><option value="date" selected="true" > Date </option></select></td></tr>
                                    <tr><td>Equals:</td><td> <input type="text" name="DATE_OF_BIRTH_equals"/></td></tr> <br/><tr><td>Greater_Then:</td><td> <input type="text" name="DATE_OF_BIRTH_greaterThen"/></td></tr><br/><tr><td>Less_Then:</td><td> <input type="text" name="DATE_OF_BIRTH_lessThen"/></td></tr><br/>
            </table> 

        </div>
    </form>
    </body>
</html>

为什么表格的垂直对齐方式从左到右变化......

最佳答案

好吧，我看到你想做的事情有几个矛盾之处。

首先:你说你想让 div 的大小固定，但后来你说 div 的大小不一样，因为它们的文本长度是可变的。您必须选择这两个选项之一。如果您在 div 中有可变文本，您必须知道您不能使 div 的尺寸固定，除非您想冒文本溢出 div 的风险。那，或者检查您的文本以确保它适合 div。

其次:您说您正在使用 float: left，但随后提示最后一个 div(我假设是行的最后一个)下方的元素也显示为 left。如果你想让一行的第一个div显示在右边，你应该使用float: right。

我希望这能为您澄清问题。

更新:

好的，我发现您的代码存在问题。首先，让我告诉你，你不应该使用表格进行布局。 <div>将使您的代码更简单，并且为此目的更好。无论如何，这并不是破坏您的布局的原因。这是一些<br/>您出于某种原因在表格末尾插入的标签。所以你的代码看起来会更好:

<form>
<div class="wrapperDiv">
    <table class="column">
        <tr>
            <td>Name<hr/></td></tr>
        <tr>
            <td>DataType :</td>
            <td>
                <select name="Name_dataType" class="dataType" onchange="typeChanged(this)" >
                    <option value="text" selected="true" > Text </option>
                    <option value="number"  > Number </option>
                    <option value="date"  > Date </option>
                </select>
            </td>
        </tr>
        <tr>
            <td>Equals:</td>
            <td>
                <input type="text" name="Name_equals"/>
            </td>
        </tr>
        <tr>
            <td>Contains:</td>
            <td>
                <input type="text" name="Name_contains"/>
            </td>
        </tr>
    </table> 

    <table class="column">
        <tr>
            <td>Name<hr/></td>
        </tr>
        <tr>
            <td>DataType :</td>
            <td>
                <select name="Name_dataType" class="dataType" onchange="typeChanged(this)" >
                    <option value="text" selected="true" > Text </option>
                    <option value="number"  > Number </option>
                    <option value="date"  > Date </option>
                </select>
            </td>
        </tr>
        <tr>
            <td>Equals:</td>
            <td>
                <input type="text" name="Name_equals"/>
            </td>
        </tr>
        <tr>
            <td>Contains:</td>
            <td>
                <input type="text" name="Name_contains"/>
            </td>
        </tr>
    </table>

    <table class="column">
        <tr>
            <td>Name<hr/></td>
        </tr>
        <tr>
            <td>DataType :</td>
            <td>
                <select name="Name_dataType" class="dataType" onchange="typeChanged(this)" >
                    <option value="text" selected="true" > Text </option>
                    <option value="number"  > Number </option>
                    <option value="date"  > Date </option>
                </select>
            </td>
        </tr>
        <tr>
            <td>Equals:</td>
            <td>
                <input type="text" name="Name_equals"/>
            </td>
        </tr>
        <tr>
            <td>Contains:</td>
            <td>
                <input type="text" name="Name_contains"/>
            </td>
        </tr>
    </table>


    <table class="column">
        <tr>
            <td>DATE_OF_BIRTH<hr/></td>
        </tr>
        <tr>
            <td>DataType :</td>
            <td>
                <select name="DATE_OF_BIRTH_dataType" class="dataType" onchange="typeChanged(this)" >
                    <option value="text"  > Text </option>
                    <option value="number"  > Number </option>
                    <option value="date" selected="true" > Date </option>
                </select>
            </td>
        </tr>
        <tr>
            <td>Equals:</td>
            <td>
                <input type="text" name="DATE_OF_BIRTH_equals"/>
            </td>
        </tr>
        <tr>
            <td>Greater_Then:</td>
            <td>
                <input type="text" name="DATE_OF_BIRTH_greaterThen"/>
            </td>
        </tr>
        <tr>
            <td>Less_Then:</td>
            <td>
                <input type="text" name="DATE_OF_BIRTH_lessThen"/>
            </td>
        </tr>
    </table> 

    <table class="column">
        <tr>
            <td>DATE_OF_BIRTH<hr/></td>
        </tr>
        <tr>
            <td>DataType :</td>
            <td>
                <select name="DATE_OF_BIRTH_dataType" class="dataType" onchange="typeChanged(this)" >
                    <option value="text"  > Text </option>
                    <option value="number"  > Number </option>
                    <option value="date" selected="true" > Date </option>
                </select>
            </td>
        </tr>
        <tr>
            <td>Equals:</td>
            <td>
                <input type="text" name="DATE_OF_BIRTH_equals"/>
            </td>
        </tr>
        <tr>
            <td>Greater_Then:</td>
            <td>
                <input type="text" name="DATE_OF_BIRTH_greaterThen"/>
            </td>
        </tr>
        <tr>
            <td>Less_Then:</td>
            <td>
                <input type="text" name="DATE_OF_BIRTH_lessThen"/>
            </td>
        </tr>
    </table>

</div>
</form>

您可以看到它在 jsfiddle 中工作 here .

关于html - 从左到右定位一定数量的div，然后在下部再次从左到右定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11259884/

html - 从左到右定位一定数量的div，然后在下部再次从左到右定位

更新:

上一篇：javascript - 我们如何验证网络表单中的文本框输入？

下一篇：html - Firefox 在其他浏览器中的字符串中断行为？