css - 如果 "all DIVs in different lines"t 只停留在一行中，如何获取 "DIVs can'"

Question

最近几天我一直在尝试找到解决方案，但一直未能成功。

情况:我在一个 div 中得到一个文本(这是给用户的一个问题)和一些在不同 div 中的单选按钮(可能的答案)。

例子:

<div class="group">
 <div class="question">How old are you?</div>
 <div class="answergroup">
    <div class="answ"><radiobutton....></div>
    <div class="answ"><radiobutton....></div>
    <div class="answ"><radiobutton....></div>
 </div>
 </div>
</div>

现在我想要一个能让我拥有的 css:

• 如果可能的话全部排成一行(宽度之和 < parent 的宽度)

• 一行中的“问题”，如果可能，另一行中的“答案组”(第二行中的所有答案)

• “问题”在一行中，如果需要，每个“答案”在不同的行中(一行中没有两个“答案”)(行是:问题、答案#1、答案#2、答案#3 ...永远不要提问，answ#1 & answ#2，answ#3..

我知道如何使用 css 来获得 3 种不同的解决方案，但我如何根据浏览器中的实际宽度情况应用它们？

我认为媒体查询不是解决方案；我需要一些“知道”DIV 实际呈现的东西。我需要基于 jQuery 的解决方案吗？

谢谢科西莫

Answer 1

您可以使用 CSS 的媒体查询。在这里找到它:http://www.w3schools.com/cssref/css3_pr_mediaquery.asp