Question

如何告诉CSS包装，当有两行时，每行包含一半的内容;三行：内容的三分之一;四排：四分之一;等等。？或者，如果我有一定数量的元素（比方说4），我可以告诉CSS更喜欢在第一次溢出之前打破一半内容的行吗？

编辑：屏幕上还有其他元素（宽度方式），所以请不要建议依赖于屏幕宽度的内容。此外，我不知道标签将包裹的像素宽度。有没有办法找出来？

以下代码中的首选中断：

// Wide enough for everything
Bedrooms: 1 2 3 4

// A little less than that
Bedrooms: 1 2
          3 4

// Not wide enough for text and half the checkboxes
Bedrooms:
1 2 3 4

// Not wide enough for the checkboxes
// In case the checkboxes are wider than the text
Bedrooms:
   1 2
   3 4

// Not wide enough for two checkboxes
// In case two checkboxes are wider than the text
Bedrooms:
    1
    2
    3
    4

链接：http://jsfiddle.net/HfuRL/

CSS：

/*horizontal the jquery mobile 1.4.2 way removes icons, so hack it in*/
.horizontal-with-icons .ui-checkbox {
    float: left;
}

HTML：

<ul>
    <li>
        <form style="display: table; margin: 0px auto;">
            <div style="vertical-align: middle; display: table-cell;">Bedrooms:</div>
            <fieldset data-role="controlgroup" class="horizontal-with-icons" style="vertical-align: middle;">
                <label>
                    <input id="bedroom-1" type="checkbox" />1</label>
                <label>
                    <input id="bedroom-2" type="checkbox" />2</label>
                <!--TODO: wrap here-->
                <label>
                    <input id="bedroom-3" type="checkbox" />3</label>
                <label>
                    <input id="bedroom-4" type="checkbox" />4</label>
            </fieldset>
        </form>
    </li>
</ul>

css换行并填充行

0 个答案: