我想显示一个(1..n)个饼图。如果屏幕足够大我想要显示两行到一行,但如果不是每一行需要100%宽度。这只能用CSS吗?如果没有,实现它的最简洁方法是什么?
我目前的尝试是将饼图div的min-width
设置为我们支持的最小屏幕尺寸上可用的宽度(可保留500px),如下所示:
div.piechart {
min-width: 500px;
width: 50%;
float:left;
}
这适用于最小的屏幕尺寸,适用于带>的屏幕。 1000px可用,但带> 500和< 1000它不起作用。
答案 0 :(得分:2)
所有浏览器都支持此解决方案。使用浮动(或内联块)以及定义的元素尺寸。只要有足够的可用内容,每行就会有更多的元素,但是当内容大小缩小时,它会相应地采用。
.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来支持旧浏览器,并且您的元素的宽度设置恰好为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");
答案 1 :(得分:0)
如果元素可以内联显示(display:inline;
),你应该能够像那样(具有固定的宽度)保留它们,并且当尺寸减小时,浏览器应该将它们放在两行上。 / p>
要了解我的意思,请尝试将其打开为HTML,然后稍微调整浏览器的大小:
<html>
<body>
<span style="width:500px; background-color:blue;">1111111111111111111111111111111111111111111111111111111111111111111</span>
<span style="width:500px; background-color:red;">22222222222222222222222222222222222222222222222222222222222222222222</span>
</body>
</html>
除此之外,您可能需要使用Javascript。
答案 2 :(得分:0)
除非有人能告诉我一个更好的方法(请做!)这样做我将用jQuery做:
在$(document).ready()
:
$(window).resize(function() {
if ($(this).width() >= 1300){
$('div.piechart').addClass('fifty');
} else {
$('div.piechart.fifty').removeClass('fifty');
}
}).resize();
在CSS中:
div.piechart {
width: 100%;
}
div.piechart.fifty {
width: 50%;
float: left;
}
答案 3 :(得分:0)
您应该使用媒体查询来执行此操作:
请参阅: http://jsfiddle.net/thirtydot/Y97QL/show/(更改浏览器窗口的宽度)
.piechart {
width: 100%;
}
@media screen and (min-width: 1300px) {
.piechart {
width: 50%;
float: left;
}
}
一些较旧的浏览器(IE7 / 8)do not support media queries。
如果您需要支持这些浏览器,则应包含JavaScript填充,例如Respond.js。