0

我有几个网页以几乎相似的方式显示数据。

变化#1：页面左上角有一个小的“图例”表，右上角有一个饼图，然后是图例表正下方的数据表，在页面的同一可视左列中。

变体 #2：与 #1 相同，除了数据表非常宽且需要整个页面宽度，因此需要位于饼图下方（而不是左侧）。

是否可以创建可供两种变体使用的 HTML 模板和 CSS？

到目前为止，我已经尝试了以下 HTML：

<div class="filters">
    <table>
        <tr>
            <th>Key</th>
            <th>Value</th>
        </tr>
        <tr>
            <td>One</td>
            <td>Woof</td>
        </tr>
        <tr>
            <td>Two</td>
            <td>August</td>
        </tr>
    </table>
</div>
<div class="graph">
    <img src="http://s3.amazonaws.com/143XJXDEC0B9AHFBPB02.static/samplePieChart.png" />
</div>
<div id="data1">
    <table>
        <tr>
            <th>Foo Column</th>
            <th>Bar</th>
            <th>Bazola</th>
        </tr>
    </table>
</div>

和 CSS：

.filters {
    border: 1px solid grey;
    float: left;
}
.graph {
    Xfloat:right;
}
#data1 {
    width: 100%;
    border: 1px solid grey;
    float: left;
}

我有一个 JSFiddle，我正在尝试解决这个问题（为简单起见，它们都在同一页面上，但不会在真实情况下）在http://jsfiddle.net/LF978/

就目前而言，它不起作用。我的真实案例有单独的页面可以工作，但会导致很多重复的代码，我很想删除这些代码。

4

2 回答 2

2

这是您可以通过调整 CSS 来实现的一种方法：

.filters {
    border: 1px solid grey;
    float: left;
}
.graph {
    float:right;
}
#data1 {
    width: 80%; /* change this to 50% and it will float below the .filters block */
    border: 1px solid grey;
    float: left;
    clear: left;
}
hr {
    margin: 1.00em 0;
    clear: both;
}

.filters向左和.graph向右浮动，这基本上是你想出来的。

对于#dataa，将其浮动到左侧并设置，如果块的右侧有空间clear: left，这将强制#data从正下方开始。.filters.graph

否则，#data1将自身放置在图形下方是宽度足够大。

参见演示：http: //jsfiddle.net/audetwebdesign/3pQzH/

请注意，hr需要清除位于图形或数据表下方。

于 2013-07-08T23:23:03.023 回答
0

您可能想为此尝试在单独的文件中编写一些 php 函数：

<?php
    function getLegend()
    {
        $legend = "
        <div class='filters'>
            <table>
                <tr><th>Key</th><th>Value</th></tr>
                <tr><td>One</td><td>Woof</td></tr>
                <tr><td>Two</td><td>August</td></tr>
            </table>
        </div>";
        return $legend;
     }

    function getChart()
    {
        $chart = "
            <div class='graph'>
              <img src='http://s3.amazonaws.com/143XJXDEC0B9AHFBPB02.static/samplePieChart.png'/>
            </div>";
        return $chart;
     }

     function getData()
    {
        $data = "
            <div id='data1'>
                <table>
                    <tr>
                        <th>Foo Column</th><th>Bar</th><th>Bazola</th></tr>
                </table>
            </div>";
        return $data;
     }
?>

您可以要求该文件进入您的页面并调用函数：

<?php
    require_once('filename.php');
?>  

<!--html markup-->

<?php 
    echo (getLegend());
    echo (getChart());
    echo (getData());
?>

确保您的页面具有 .php 扩展名，否则它将无法正常工作！

于 2013-07-08T23:22:53.673 回答