0

入力フィールドが列に表示されるレイアウトを実現しようとしています。列がコンテナーの高さを超える場合は、水平方向に折り返す必要があります。

flexbox を使用してこのレイアウトを実現しましたが、flexbox (より具体的にはflex-wrapプロパティ)は十分にサポートされていません。私の場合、最新の Web ブラウザーと少なくとも IE9+ をサポートする必要があります。

さらに、フォームのコンテンツは、このメソッドの行に沿って Ember.js によって生成されます。フォームの変更にバインドされているモデルが変更されます。これは、入力フィールドの数が動的であることを意味します。

このレイアウトをより互換的に実現するにはどうすればよいですか?

4

1 に答える 1

0

Fiddle を少し更新しました: http://jsfiddle.net/43k5s/6/

.menu-form {
    background-color: lightgray;
    padding: 1em 1.5em;
}

.menu-form:before, .menu-form:after {
    content: "\0020";
    display: block;
    height: 0;
    visibility: hidden;
}

.menu-form:after {
    clear: both;
}

.menu-form {
    zoom: 1;
}

.menu-form div {
    width: 33%;
    float: left;
}

.menu-form div label {
    display: block;
}

float と clearfix を使用すると、これはすべての主要なブラウザー (古い IE でも) で動作するはずです。固定幅またはメディア クエリを使用して列数を変更することもできます。

于 2013-07-11T19:41:20.113 に答える