答えて
のようなリストを取得するために、純粋なCSS(フロート)とpossbileです:
LI1 LI2
LI3 LI4
LI5 LI6
が、取得するには:
LI1 LI4
LI2 LI5
LI3 LI6
あなたがjavascriptや2リストを使用する必要があるだろうCSSのスタイリング。にあなたの幅、余白とパディングを調整
ul { width:400px; overflow:hidden; margin:0; padding:0; }
li { width:200px; float:left; margin:0; padding:0; }
を:次のようになり、私の最初のシナリオのため
CSSを:(EDIT cale_bによって別の答えは言及してか、最近のブラウザのためにあなたはcolumn-count
を使用することができます)あなたの好みはもちろん
これはまさに私が感謝のために探していたものでした! –
いいえ問題はありません、うれしいことです:) –
私は第2のシナリオは、LIの注文と同じコードを使用して少し微調整で達成できると思います。そして、よりエレガントにnth-childを使用しています。 http://jsfiddle.net/r5G9p/ –
確かに。アイテムが最初に列内を流れなければならないか、または左から右へ流れることができるかによって異なります。左から右への場合
はOKです、ただディスプレイを割り当てる:ブロック、フロート:左、とのli要素に幅:
li {
display: block;
width: 150px;
float: left;
}
それは最初に流下するためにあなたが探しているのであれば、その後、右に、そしてCSS3の列数を含む最近のブラウザのためのいくつかの技術は(だけ現代のブラウザで動作します)があります。
ul {
-moz-column-count:2; /* Firefox */
-webkit-column-count:2; /* Safari and Chrome */
column-count:2;
}
あなたの第三の選択肢は二つのリストを並べて使用することであろう、
あるいは、あなたが言及したように、divs。
+1 –
私はあなたができると思いますが、それぞれのリストが2つあり、それぞれがうまくいくと思います。
リストで簡単に可能です。やってみました?
これはCSSの問題です。暗闇の中で
刺し:
ul { list-style: none; width: 400px; background: #eee; }
li { display: inline-block; float: left;margin: 10px; width: 158px; background: #eee;border: 1px solid #aaa;height: 100px; }
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
- 1. 表示空のリスト項目リスト全体が、私はこの</p> <p><img src="https://i.stack.imgur.com/Sm2vX.png" alt="enter image description here"> そして、私は空のこの種を表示することができますどのようにこの</p> <p>ような何かを達成したいアンドロイド
- 2. これは可能ですか?それはようにjQueryを使用することは可能だが、それをターゲットにするのjQueryを使用して<code>white</code>に<code>black</code>テキストを置換することが可能である私が知っている、
- 3. は、それが描画可能に私たち自身のフォルダを作成することが可能です
- 4. LOOQを使用して新しいリストを作成<Bar>リスト<Foo>ここで、Fooには可変のバーがありますか?
- 5. のような、それは私が作成したリストを検索することが可能だ場合、私は思っていた
- 6. AEM Sightly - カスタムのデータ属性を作成することは可能ですか?カスタム属性を作成する方法、例えば:ただ、カスタムJSPタグのような</p> <pre><code><div data-sly-myAttribute="${whatever}"></div> </code></pre> <p>がある場合
- 7. 括弧で囲まれたインデントされたコードブロックを作成することは可能ですか?<CR>?
- 8. ミニオンなしで "sys.list_modules"コマンドを実行する方法はありますか? - 可能それは手先ことなく、上記を実行するかどうかを</p> <pre><code>salt '<minion_name>' sys.list_modules </code></pre> <p>私の質問は、 です:限りドキュメントは1が使用可能な実行モジュールを照会したい場合は、次のコマンドを使用する必要があり、行くよう
- 9. 変換はchar []は配列<p>はのは、私は配列を持っているとしましょうこれを達成するためのメソッドで、または私はループを行う必要がありますか?</p>
- 10. CSS:私はテーブルでこれを達成するために使用されるが、私は以来、テーブルを使用しないことを決定しました</p> <p><img src="https://i.stack.imgur.com/Bc8UY.jpg" alt="alt text"></p> <p>:サイドバーに折り畳まれたヘッダリボン
- 11. は、どのように私はこの答えはここにあるが、私はそれを見つけることができなかった(または私はそれを見たときに、少なくとも<em>は</em>それを認識!)</strong>を知っ<strong>HTMLの画像のsrcタグ
- 12. ランキング行<p>それは以下のようにRANK番号を作成することは可能ですか?事前にあなたの助けのための</p> <p><img src="https://i.stack.imgur.com/8blsP.png" alt="Image"></p> <p>おかげで、</p>
- 13. それはのbasic_string <> ::イテレータをテンプレートすることは可能ですか?
- 14. XCTestCaseは、私はちょうど罰金そう<code>XCTestCase</code>テストの内部のようなエンティティを作成することができ
- 15. だから、これが最も可能性が高いことはできませんが、私はちょうどチェックするために、これを求めている...私はちょうど...大声でここに</p> <p>を考えているのHTTPユーザ認証
- 16. <# #>タグはありますか?それは、このコードではどのような用途を持つことができない場合や
- 17. あなたはそれがこのような何かすることが可能であるさえずり
- 18. これらのテーブルはどのようにクエリする必要がありますか?</p> <p><img src="https://i.stack.imgur.com/zh2ln.png" alt="E-R"></p> <p>これは、記事やそれぞれのIDと(最初の)オファーテーブルです:</p> <p><img src="https://i.stack.imgur.com/AKvxm.png" alt="offer"></p> <p>これは、(第2)該入札額である私が持っているデータベースがい
- 19. カスタムリストの箇条書き:活動のための私のアプローチ</p> <p><img src="https://i.stack.imgur.com/RSBBn.png" alt="enter image description here"></p> <p>とセクションがリストを使用してそれらのオプションを作成することでしたオブジェクト:
- 20. <img>タグのsrc = ""が同じかどうかを確認する方法はありますか?
- 21. は、私はあなたが<em>domain.com</em>、それは<em>domain.com.ipaddress.com</em></p> <p>にリダイレクトされます場合はここではメインのコードだとChromeの拡張機能を作成していたURL
- 22. 画像からカラーパレットを生成できるjsライブラリはありますか?私はあなたがあなたのイメージをアップロードすることができ、それはあなたのための色を生成することになるが、私は私のウェブサイト上のような</p> <p>何かを置くために何かをしたいいくつかのウェブサイトがあります知っている</p> <pre><code><img class="image" ... /> $(".image").get_colors() </code></pre> <p>ような何かを行う可能性があります
- 23. ジェネリッククラスをキャストすることはなぜ可能ですか?それは、このようなキャストを行うことは不可能ですので
- 24. イベントを作成する場所はどこですか?可能?
- 25. は、どのように私は私はこのようなチャートを作成する必要があります#
- 26. iOSでサウンド振幅をグラフィカルに表示して表示する方法は?私はこれを達成することができますどのように</p> <p><img src="https://i.stack.imgur.com/hVHRm.png" alt="enter image description here"></p> <p>誰かが私を導いてくださいすることができ:
- 27. 、いくつかの要素(div要素)は(あなたが<strong>sourceFields</strong>でそれを見ることができます)<strong>フォーム</strong>のうち、どのようにこのページがロードされる方法ではJavaScript
- 28. Firebaseは、私は、クエリをFirebaseことができます場合SQLserverなどのデータは、フィルタデータを持つデータ</p> <p><img src="https://i.stack.imgur.com/qWNVY.jpg" alt="enter image description here"></p> <p>を照会する必要があるデータ
- 29. windows powershellのtail -fに相当するものは何ですか?私たちはどのように私はこれを達成することができますLinuxのWindowsで</p> </blockquote> <p>に</p> <blockquote> <p>は、tail -fコマンドを使用して取得するよう
- 30. jQueryのは、ネストされた順序付きリストをループして、私はこのリストをループのことができるようにとの正確な位置を保存するこの</p> <p><img src="https://i.stack.imgur.com/yQ8qk.png" alt="enter image description here"></p> <p>のように見える各要素
一つの方法は、私は考えることができる、あなたができる3つの 'li' – check123
の垂直セットをacomodateする' div'各隣接する必要がありますこのタイプのリスティングにはテーブルも使用してください。 – NewUser
@newuserテーブルを使用することはできますが、そのデータが表形式のデータである場合に限ります。それ以外の場合は、テーブル要素を使用することになっているメンテナンスが難しく、誤用されます。 –