Question

这个CSS有什么明显的东西可以揭示我如何让图表显示在数据表的右边而不是下面吗？或者图表位置是由Javascript控制的？你能提供解决方案吗？我尝试了各种CSS方法，从数据表中拆分图表，没有运气。

图表确实显示在我的浏览器中，但我无法让它在jsfiddle中工作。

（P.S.Javascript在上面的jsfiddle中 - 它很长......）

这是HTML：

<!DOCTYPE html>
  <head>
    <script type="text/javascript" src="//www.google.com/jsapi"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="js/attc.googleCharts.js"></script>
    <link rel="stylesheet" type="text/css" href="cs/attcSandbox.css">
  </head>
  <body>
    <div class="mainContent">
        <table class="left"
            title="Attendance Percentages" 
            id="AttendancePercentages" 
            summary="pieDescription" 
            data-attc-createChart="true"
            data-attc-colDescription="pieDescription" 
            data-attc-colValues="pieValues" 
            data-attc-location="AttendancePercentagesPie" 
            data-attc-hideTable="true" 
            data-attc-type="pie"
            data-attc-googleOptions='{"is3D":true}'
            data-attc-controls='{"showHide":true,"create":true,"chartType":true}'
            >
            <thead>
                <tr>
                    <th id="pieDescription">Description</th>
                    <th id="pieValues">Sessions</th>
                    <th>%</th>
                    <th>Other</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Present</td>
                    <td>405</td>
                    <td>89</td>
                    <td>5</td>
                </tr>
                <tr>
                    <td>Missing</td>
                    <td>1</td>
                    <td>0</td>
                    <td>4</td>
                </tr>
                <tr>
                    <td>Authorised Absent</td>
                    <td>36</td>
                    <td>7</td>
                    <td>3</td>
                </tr>
                <tr>
                    <td>Unauthorised Absent</td>
                    <td>1</td>
                    <td>0</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>Late</td>
                    <td>30</td>
                    <td>2</td>
                    <td>1</td>
                </tr>
            </tbody>
        </table>
        <div class="right" id="AttendancePercentagesPie"></div>
        </div>
  </body>
</html>

这是CSS：

/* @media screen { */
/* override css in main */
body{
    margin-left: 5px; margin-right: 5px;
    margin-top:5px;
    width:100%;
    position:relative;
    left:0px;
    top:0px;
    z-index:0;
    background-color:#FFFFFF;
    color:#47535E;
    font-size:0.7em;
    font-family: Calibri, sans-serif;
}

div.left {
    border: 2px solid #CFBFAF;
    width: 49%;
    float: left;
}

div.right {
    border: 2px solid #CFBFAF;
    width: 49%;
    float: right;
}

div.mainContent{
    margin-left: 20px; margin-right: 20px;
    width:400px;
}
table{
    margin-left: auto; margin-right: auto;
    width:98%;
    border:1px solid #E6E6E6;
    border-radius:5px;
    box-sizing: border-box;
    background-color:#F6F6F6;
    border-collapse: collapse;
}
table td,table th{
    border:1px solid #E6E6E6;
    border-top:1px solid #FFFFFF;
}
table th{
    background-color:#FFFFFF;
}
/*attc classes*/
/*attc classes*/
div.attcControls{
    width:100%;
    border:1px solid #E6E6E6;
    border-radius:5px;
    box-sizing: border-box;
    background-color:#F6F6F6;
}
div.attcControls ul{
    overflow:hidden;
    padding:2px 2px 2px 2px;
    margin:0px;
}
div.attcControls ul li{
    margin:0px;
    padding:0px 0px 0px 10px;
    list-style-type: none;
    display: inline;
    float:right;
    clear:none;
}
div.attcControls ul li a{
    border:1px solid #9CDFF7;
    border-radius:3px;
    box-sizing: border-box;
    background-color:#86D6F5;
    padding:2px;
    color:white;
    text-decoration:none;
    display:inline-block;
    background-image:none;
    font-weight:normal;
}
div.attcControls ul li a:hover{
    border:1px solid white;
    color:#47535E;
}
div.attcControls ul li fieldset{
    border:1px solid #9CDFF7;
    border-radius:3px;
    box-sizing: border-box;
    background-color:#86D6F5;
    padding:2px;
    margin:0px;
    color:white;
    text-decoration:none;
}
div.attcControls ul li fieldset label{
    padding-right:5px;  
}
div.attcControls ul li fieldset select{
    font-size:1em;
    padding:0px;
    margin:0px;
}

input.attcEditCheckRadioBoxes{
    display: block;
    margin-left: auto;
    margin-right: auto;
}
/* } */

（Source code link here下的Apache 2.0 license）

Answer 1

首先你指定div.left有几件事情，因此表上的类永远不会从它的类名左边继承任何属性。其次，表的宽度为98％，这意味着它将占据整个块，并强制所有内容高于或低于。理想情况下，您希望右侧和左侧类的应用宽度为49％，您应该可以正常添加2px左右两个等于每个容器的总共4px，并且在400px宽度中实际上应该达到1％.mainContent区域某些浏览器可能不完全尊重此大小，因此您可能需要稍微减小宽度以适应边框。

Answer 2

这是一个modified JsFiddle，我设法让它漂浮在桌子的右边。

简而言之，我将此添加到您的CSS中：

.right{
    float: right;
    width: 40%;
}
.left{
    float: left;
    width: 60%;
}

并从您的表格中删除固定宽度（98％）。

我还建议让主体更宽，以适应它们中的两个，请注意，如果右浮动元素内的内容是一个大块元素（如图表），它可能会爆炸（要么在表格之下）或在主体之外）。

（如果您使用的是bootstrap，或者由于框架而导致.right和.left类有其他原因，请考虑针对固定的40％和60％宽度单独创建类，或使用内置跨度）

如何在CSS中的数据表旁边显示此图表？

2 个答案: