Question

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

变体＃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/

处理这个问题（为简单起见，它们都在同一页面，但不是真实的情况）

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

Answer 1

以下是通过调整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 {1}}阻止。

否则，hr会将自身置于图表下方，宽度足够大。

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

请注意，{{1}}需要清除为低于图表或数据表。

Answer 2

您可能想尝试在单独的文件中编写一些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扩展名，否则无法使用！

基于宽度的HTML / CSS块浮动变体

2 个答案: