0

我有一定数量的动态生成的#divs 已知.className(All have same 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>

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

4

1 回答 1

0

好的，我看到你想做的事情有一些矛盾。

首先：您说要固定 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 中工作。

于 2012-06-29T10:51:46.940 回答