Question

我想显示一个（1..n）个饼图。如果屏幕足够大我想要显示两行到一行，但如果不是每一行需要100％宽度。这只能用CSS吗？如果没有，实现它的最简洁方法是什么？

我目前的尝试是将饼图div的min-width设置为我们支持的最小屏幕尺寸上可用的宽度（可保留500px），如下所示：

div.piechart {
  min-width: 500px;
  width: 50%;
  float:left;
}

这适用于最小的屏幕尺寸，适用于带＆gt;的屏幕。 1000px可用，但带＆gt; 500和＆lt; 1000它不起作用。

Answer 1

所有浏览器支持的第一个解决方案

所有浏览器都支持此解决方案。使用浮动（或内联块）以及定义的元素尺寸。只要有足够的可用内容，每行就会有更多的元素，但是当内容大小缩小时，它会相应地采用。

.item
{
    display: inline-block;
    // or
    float: left;

    width: 300px;
}

第三种解决方案是使用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");

Answer 2

如果元素可以内联显示（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。

Answer 3

除非有人能告诉我一个更好的方法（请做！）这样做我将用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;
}

Answer 4

您应该使用媒体查询来执行此操作：

请参阅： 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。

CSS - 一行中的一个100％宽度元素或两个50％宽度元素，具体取决于屏幕大小

4 个答案:

所有浏览器支持的第一个解决方案

最新浏览器的第二个解决方案

第三种解决方案是使用Javascript