0

オーバーフロー時にそれらをラップし、水平方向にスクロール可能なリストになるアイテムの垂直リストを実現しようとしています。これを実現するためにフレックスボックスを使用したいと考えています。

Webkit と IE は期待どおりの出力を生成します。Firefox はそうではありません。この例を参照してください:

JSFIDDLE サンプル

    <div class="listbox flex-direction-vertical flex-wrap">
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div>
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div>
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div>
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div>
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div>
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div>
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div>
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div>
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div>
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div>
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div>
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div>
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div>
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div>
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div>
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div>
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div>
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div>
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div>
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div>
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div>
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div>
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div>
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div>
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div>
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div>
  </div>

BODY 
{
    counter-reset: listitem; /* Create an item counter scope */
}
.content:before {
    content: "item " counter(listitem) ". ";
    counter-increment: listitem;  /* Add 1 to listitem */
}
.listbox
{
    height: 400px;
    width:600px;
    background-color:lightgray;
    overflow:auto;

    /* old syntax */
    display: -webkit-box;
    display: -moz-box;

    /* new syntax */
    display: -webkit-flex; 
    display: -moz-flex; 
    display: -moz-flexbox;
    display: -o-flex; 
    display: -ms-flex;
    display: -ms-flexbox; 
    display: flexbox;
    display: flex; 
}
.flex-direction-vertical
{
    /* old syntax */
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -moz-box-align:start;
    -moz-box-pack:start;

    /* new syntax */
    -webkit-flex-direction:column;
    -moz-flex-direction:column; 
    -o-flex-direction:column; 
    -ms-flex-direction:column; 
    flex-direction:column;

}
.flex-wrap
{
    /* old syntax */
    -webkit-box-wrap: wrap;
    -moz-box-wrap: wrap;

    /* new syntax */
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap; 
    -o-flex-wrap:wrap; 
    -ms-flex-wrap:wrap; 
    flex-wrap:wrap;
}
.listitem
{
    background-color:green;
    border: 2px solid red;
    height:100px;
    width:200px;
}
.content
{
    background-color:gray;
}

Firefox の解決策を見つけるのを手伝ってください。

事前にありがとうアレックス

4

1 に答える 1

1

バージョン 20 より前の Firefox を使用している場合は、運が悪いです。それらの FF は 2009 年からの仕様に従い、ラッピングを制御するプロパティはbox-lines(single|multiple) と呼ばれます。唯一の問題は、彼らがそれを実装していないことです: https://bugzilla.mozilla.org/show_bug.cgi?id=562073

バージョン 20 以降、FF は 2012 年 9 月の仕様に準拠します。私は彼らの進捗状況を追跡していませんが、caniuse は「部分的にサポートされている」だけでなく、これらのバージョンで完全に「サポートされている」とマークしています。

于 2013-02-21T18:43:52.523 に答える