0

I have several web pages which display data in mostly similar fashion.

Variation #1: There is one small "legend" table in the upper left of the page, a pie chart in the upper right, and then a data table directly below the legend table, in the same visual left column of the page.

Variation #2: Same as #1 EXCEPT the data table is very wide and needs the entire page width, and hence needs to be below (rather than to the left of) the pie chart.

Is it possible to create an HTML template and CSS usable by both Variations?

So far, I have tried the following 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>

and CSS:

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

I have a JSFiddle where I am trying to work this out (for simplicity, they are both on the same page, but will not be in the real case) at http://jsfiddle.net/LF978/

As it currently stands, it does not work. My real case has separate pages which work, but result in a lot of duplicated code, which I'd love to remove.

4

2 に答える 2

2

CSS を調整することで実現できる 1 つの方法を次に示します。

.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 に答える