Question

我需要做些什么才能将“标题”包含在此代码段中？另外，当它包裹时，应该将桌子向下推。下面是一张图片。我希望这行以这是标题来包装。

Need the Title to Wrap

代码：

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=ANSI">
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <style type='text/css'>

      #body {
        width:400px;
        margin:0 auto;
        background-color: #fff;
      }

      #content-1 {
        float:left;
        width:100%;
        background:#f7f7f7;
      }

      #wrapper {  bottom:0;overflow: hidden; }
      .tablecontent { z-index: 99;  margin: 10px; padding: 35px 5px 5px 5px;background-color:#FFFFFF;  border: 1px solid; border-color: #B8B8B8; border-radius: 4px;}
      .tabletitle {color: #005c9c;padding-top: 20px;padding-left: 20px;z-index: 100;position:absolute;}
    </style>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart","table"]});

      google.setOnLoadCallback(drawChart);
      function drawChart() {

        var cssClassNames = {
        'tableCell': 'wrapall'};



        var datatable = new google.visualization.DataTable();
        datatable.addColumn('string','Country','col1');
        datatable.addColumn('number','Metric 1');
        datatable.addColumn('number','Metric2');
        datatable.addColumn('number','Metric3');
        datatable.addRows(2);
        datatable.setCell(0,0,'United States');
        datatable.setCell(0,1,7);
        datatable.setCell(0,2,306);
        datatable.setCell(0,3,67.32,'67.32%');
        datatable.setCell(1,0,'India');
        datatable.setCell(1,1,5);
        datatable.setCell(1,2,139);
        datatable.setCell(1,3,76.98,'76.98%');

        var table = new google.visualization.Table(document.getElementById('dashboardtable_20'));
        table.draw(datatable, {showRowNumber: false, 'allowHtml': true, 'cssClassNames': cssClassNames});
      }
    </script>





  </head>
  <body>
    <div id="body">
      <div id="wrapper">
        <div id="main">
          <div id="content-1">
            <div class="tabletitle">This is the title of my widget. But I want this to wrap if the title is long.</div>
            <div id="dashboardtable_20" class="tablecontent"></div>
          </div>

        </div>


      </div>
    </body>
  </html>

Answer 1

我建议不要使用position:absolute，而是尝试匹配标题和表格中的样式，如下所示：

.tablecontent {
  margin: 10px;
  padding: 5px;
  background-color: #FFFFFF;
  border: 1px solid #B8B8B8;
  border-radius: 0 0 4px 4px;
  border-top: none;
  margin-top: 0;
}
.tabletitle {
  color: #005c9c;
  padding: 5px;
  background: white;
  border: 1px solid #B8B8B8;
  border-bottom: none;
  margin: 10px;
  margin-bottom: 0;
  border-radius: 4px 4px 0 0;
}

DemoFiddle

Answer 2

从position: absolute;删除规则.tabletitle。

Answer 3

LIVE DEMO

 .tabletitle {
    color: #005c9c;
    padding-top: 13px;
    padding-left: 25px;
    z-index: 100;
    position:absolute;
     margin-right: 80px;
             }

我希望这个甜蜜是你的需求

Answer 4

我改变了你的CSS，它有点像hacky但它保持标记相同。我删除了position: absolute和其他不必要的属性。的 jsFiddle

<小时/>

Answer 5

将绝对位置更改为相对值，然后对特定div进行高度和宽度调整：

.tabletitle {
color: #005c9c;
padding-top: 12px;
padding-left: 20px;
z-index: 100;
position: relative;
white-space: normal;
width: 282px;
height: 16px;
top: 27px;
}

小提琴：http://jsfiddle.net/8mqnLcd6/20/

需要CSS来获取此文本

5 个答案:

DemoFiddle