我想显示一些 (1..n) 的饼图。如果屏幕足够大,我想在一行中显示两个,但如果不是每个都需要 100% 宽度。这可能只用 CSS 吗?如果没有,实现它的最干净的方法是什么?我目前的尝试是将饼图 div 的 min-width 设置为我们支持的最小屏幕尺寸上可用的宽度(这留下 500px 可用),因此如下所示:div.piechart { min-width: 500px; width: 50%; float:left;}这适用于最小的屏幕尺寸,它适用于 > 1000px 可用的屏幕,但对于 > 500 和 最佳答案 所有浏览器都支持的第一个解决方案所有浏览器都支持此解决方案。使用 float (或内联块)以及定义的元素尺寸。只要有足够的可用内容,每行就会有更多元素,但是当内容大小变窄时,它会相应地采用。.item{ display: inline-block; // or float: left; width: 300px;}最新浏览器的第二种解决方案这个对不同的浏览器窗口大小使用不同的 CSS 设置。待续 This blog post 非常简洁地概述了这个功能,基本上是这样做的:<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" />第三个解决方案是使用 Javascript最后,您始终可以使用 Javascript 来支持旧浏览器,并且您的元素也可以设置为 50% 或 100% 的宽度。我会这样做:.item{ display: inline-block; width: 100%;}.small{ width: 50% !important;}!important 规则仅在定义其宽度的可调整大小元素的样式在之后定义时才需要。如果 .small 是最后一个,您可以省略 !important 规则。然后将元素定义为:<div class="item resizable">...</div>并在像 jQuery 或类似的库的帮助下附加窗口调整大小事件处理程序以检查浏览器窗口宽度并向可调整大小的元素添加/删除其他 CSS 类:var width = ...if (width < 1000){ $(".item.resizable").addClass("small");}else{ $(".item.resizable").removeClass("small");}或者,如果您知道自己在做什么,则编写更少的代码行:var width = ...var e = $(".item.resizable");width < 1000 && e.addClass("small") || e.removeClass("small");关于CSS - 根据屏幕尺寸,一行上的一个 100% 宽度元素或两个 50% 宽度元素,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/8615804/