Question

我创建了一个html页面，我想要显示一些图表。对于每个图表，我都写了文字。该图表位于div中，文本位于单独的div中，尽管它们属于彼此。

当我的窗口很小时，图表会显示在彼此下方的垂直线上，这是正常的。当窗口很大时，div显示为水平，尽管文本和图表是分开的。一张图片将清楚我要解释的内容：

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

如果有可能的话，我希望文本和图表能够成为一体吗？感谢您的帮助和努力:)。

编辑： 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>

对于每个图表，它是相同的。我只使用1个表1 tr和1 td。我没有使用CSS。你给出的答案让我想到创建一个内联css。我会尝试你的解决方案。谢谢到目前为止！

Answer 1

你能展示一些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和text都在同一个div中，所以它们应该保持在一起。包装div“块”必须具有阻塞的宽度。块内的浮动图形和文本将使它们彼此相互支撑。

这是你的意思吗？

Answer 2

你可以使用float:left：

使div堆叠起来

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

jsFiddle示例here

Answer 3

您可以使用以下代码（查看小提琴 - 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>

有内联块，因此它们总是会创建一系列块，并且它们在很多方面都比浮动更好。

HTML DIV分组＆amp;基于windowsize调整大小

3 个答案: