0

動的に生成された特定の数の #div があり、.className は既知 (すべて同じ className です) ですが、ID は不明です。#div のサイズ (幅、高さ) を固定してから、左から右に 1 行で表示し、行に収まらない場合は次の行に表示したいと考えています。(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 のサイズが同じではないと言います。2 つのオプションのいずれかを選択する必要があります。div に可変テキストがある場合、テキストが div からはみ出す危険を冒したくない限り、div のサイズを固定できないことに注意する必要があります。または、テキストをチェックして、div に適合していることを確認してください。

2番目: float: left を使用していると言いますが、最後の div (行の最後と思われます) の下の要素も左に表示されると不平を言います。行の最初の 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で動作していることがわかります。

于 2012-06-29T10:51:46.940 に答える