Javascript css换行和填充行

我如何告诉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

链接：

CSS:

/*jquery mobile 1.4.2方式删除图标，因此将其破解*/
.带有图标的水平.ui复选框{
浮动：左；
}

HTML:

卧室：
1.
2.
3.
4.

我建议考虑使用网格框架。这里有一束@skzryzg为什么在这么小的事情上使用网格？好吧，@Jayden描述的行为正是网格框架创建的目的，没有必要重新发明轮子。虽然特定场景是一个简单的案例，但他/她显然正在规划一个响应性强的页面，因此适用于此单一案例的任何内容都将适用于整个页面。最后，Jayden似乎不知道网格框架。即使你不同意它们的用法，至少知道它们的存在是好的。你可能需要一个JS解决方案来解决这个问题。我不确定是否可以只使用CSS来实现它。请注意，如果手动拆分contorlgroup元素，将丢失样式。@skzryzg我可以在没有框架的情况下使用网格吗？我看到有一个叫做css网格布局的东西，还有一个适用于“IE9+和所有其他浏览器”的多边形填充