基于windowsize的HTML DIV分组和调整大小

我创建了一个html页面，我想在其中显示一些图表。对于我编写文本的每个图表。图表是在一个div中，文本是在一个单独的div中，尽管它们属于彼此。基于windowsize的HTML DIV分组和调整大小

当我的窗口很小时，图表显示在彼此正下方的垂直线上。当窗口很大时，虽然文本和图表是分开的，但div显示为水平。相机会clearify什么，我试图解释：

The charts at the left are shown when the window size is small, the charts on the right is shown when the window size is largeenter image description here

我想文字和toghether图表作为一个如果这是可能的吗？感谢您的帮助和努力:)。

编辑： Examplecode：
<table><tr><td><div style="text-align: center;" class="span-5" >New sales orders versus previous year (100%)</div> <div id="ordcountVsPreviousYearDialChart_Object" class="span-3"></div> </td></tr></table>

对于每个其same.I我只用1台1 tr和1个TD排行榜。我没有使用CSS。你给的答案让我想到创建一个内联的CSS。我会尝试你的解决方案。非常感谢！

来源

2011-08-24 Goeruf

您可以使用下面的代码（看小提琴 - http://jsfiddle.net/kizu/tNwAU/）

<span style="display:inline-block;text-align: center;" class="span-5"> 
    <span style="display:block;"> 
     New sales orders versus previous year (100%) 
    </span> 
    <span id="ordcountVsPreviousYearDialChart_Object" class="span-3"></span> 
</span>

有是内联块，所以它们总是会创建块的行，并且在很多方面它们比浮动块更好。

来源

2011-08-24 12:56:52 kizu

感谢大家的投入和努力。 Kizu，你的答案就像一个魅力！ – Goeruf

请问您能展示一些HTML吗？也可能是CSS？

你想要可以下面的HTML实现什么：

<div class="block"> 
    <div class="graph">Graph goes here</div> 
    <div class="text">Text goes here</div> 
</div>

你的CSS将类似于以下内容：

.block { display:block;width:someWidthPx;height:someHeightPx; } 
.graph { display:block;width:someWidthPx;height:someHeightPx;float:left; } 
.text { display:block;width:someWidthPx;height:someHeightPx;float:left; }

因为无论grah和文字都是一样的专区内，他们应该留一起。包装div'块'必须有一个阻塞的宽度。浮动图形和块内的文字，将导致它们站在彼此之下。

这是你的意思吗？

来源

2011-08-24 12:26:21 bjornruysen

你可以div的可叠放像使用float:left：

________ ____________ ___ 
|1 2 3 4 | |1 2 3 4 5 6 | | 1 | 
|5 6  | |____________| | 2 | 
|________|    | 3 | 
          | 4 | 
          | 5 | 
          | 6 | 
          |___|

的jsfiddle例如here

来源

2011-08-24 12:53:54

基于windowsize的HTML DIV分组和调整大小

回答

相关问题