0

display: inline-blockすべての空のスペースを埋めるために、属性を持ち、幅が定義されていない要素のリストを並べ替える必要があります。

この例で私が何を意味するかを理解できます。

http://jsbin.com/ozuxip/1/edit

ご覧のとおり、最初のリストの「それほど長くないテキスト」の近くには多くの空白があり、2番目のリストでは、スペースを埋めるのに十分な短い2つの要素でスペースが埋められています。自動化する必要があります。

この例では、赤い長方形で「空白」とは何かを確認できます http://jsbin.com/ozuxip/7/edit

PHP、jQuery、CSSなどを使用できます。アドバイスはありますか？

4

2 に答える 2

2

私があなたの質問を正しく理解していれば、基本的には、幅の異なる要素が何らかのきちんとしたグリッドを作成することを望んでいます。その場合は、Isotopeプラグインを使用してみてください：http：//isotope.metafizzy.co/

于 2013-02-15T22:06:00.070 に答える
0

私があなたを正しく理解しているなら、あなたはLIの間の空白を削除したいですか？これが私が得たものです。UL全体を親要素にカプセル化します。

<div id="test">
<ul class="discussions">
    <li class="discussion btn btn-primary">Not so long text</li>
    <li class="discussion btn btn-primary">Very very long text with lot of words.</li>
    <li class="discussion btn btn-primary">Another long text foobar.</li>

    <li class="discussion btn btn-primary">I'm short</li>
    <li class="discussion btn btn-primary">I'm so short</li>
    <li class="discussion btn btn-primary">And me?</li>
    <li class="discussion btn btn-primary">Shut up</li>
    <li class="discussion btn btn-primary">Ok, sorry... peace bro</li>
</ul>
</div>

そして、これをCSSに追加します

#test{
  font-size: 0px;
}

li
{
  margin: 0px !important;
  font-size: 12; //this can be varied depending on your desired font size
}
于 2013-02-14T10:48:16.480 に答える