Question

我有一定数量的动态生成的#divs已知.className（所有具有相同的className）但未知的Id。我想使#divs的大小（宽度，高度）固定，然后从左到右，在一行中显示它们，如果它不适合行，则显示到下一行。我试过（浮动：左），但最后一个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>

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

Answer 1

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

首先：你说你想让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中看到它。

从左到右定位一定数量的div，然后在下半部分从左到右定位

1 个答案:

更新