Div位置问题

时间：2014-08-22 10:45:18

标签： html css dashboard

我已声明div 标签栏，其中包含四个div。我想连续排列那四个div而不是列。但我在设计方面遇到了问题。我想将这四个div显示为数据选项卡，如下所示。 enter image description here

由于这四个对象基本上是4个div在一个主div中，我希望显示类似的输出。我正在分享html和css文件。请查看此代码并提出更改/修改建议。

的index.html 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>3G Awareness</title>
        <link rel="stylesheet" href="960.css" type="text/css" media="screen" charset="utf-8" />
        <link rel="stylesheet" href="template.css" type="text/css" media="screen" charset="utf-8" />
        <link rel="stylesheet" href="colour.css" type="text/css" media="screen" charset="utf-8" />
        <!--[if IE]><![if gte IE 6]><![endif]-->
        <script src="js/glow/1.7.0/core/core.js" type="text/javascript"></script>
        <script src="js/glow/1.7.0/widgets/widgets.js" type="text/javascript"></script>
        <link href="js/glow/1.7.0/widgets/widgets.css" type="text/css" rel="stylesheet" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <link href="bootstrap.min.css" rel="stylesheet">

    </head>



    <body>

        <h1 id="head" align="center" style="background-color:blue; color:#FFF"  >3G Awareness</h1>

        <ul id="navigation" style="background-color:white;">
            <li><span class="active">Pre Analysis</span></li>
            <li><a href="#">Data</a></li>


        </ul>
        <div id="tabbar" style="width:1000">
        <div id="total">
        Total
        </div>
         <div id="information">
         Infromation
        </div>
         <div id="complaint">
         Complaints
        </div>
         <div id="result">
         Result
        </div>
        </div>

        <section>
        <div id="container" class="box1">
        <div id="info">

        </div>
        <div id="complaint" >

        </div>
        </div>
        </section>



    </body>
</html>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script>
$(function () {
    $('#info').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: '3G and 4G Information'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: true
                }
            },
            series: [{
                type: 'pie',
                name: 'Pie Share',
                data: [
                  ["3G or 4G General Info",7947  ],
  ["3G Speed Info",365  ],
  ["3G Coverage Info",5222  ],
  ["Zong 3G and 4G Trivia",79  ],
  ["3G Experience Program at Lahore",16  ],
  ["3G Isb/Rwp Info",650  ],
  ["3G Karachi Info",933  ],
  ["Inquiry about 3G launch in other cities",3271  ],
  ["3G Lahore Info",596  ]                
                       ]
            }]
        });
         $('#complaint').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: '3G and 4G Complaints'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: true
                }
            },
            series: [{
                type: 'pie',
                name: 'Pie Share',
                data: [
                             ["3G Coverage Complaint",113  ],
                             ["3G Call Connectivity Complaint",20  ],
                             ["3G Call Connectivity Complaint",20  ],
                             ["3G Data Complaint",102  ],
                             ["3G Packages Related Complaint",17  ],
                             ["3G Settings Complaint",10  ],
                             ["3G Packages Related Complaint",8  ],
                             ["3G Settings Complaint",20  ],
                             ["3G Call Quality Complaint",7  ],
                             ["3G Overcharging Complaint",10  ],
                             ["3G Video Call Complaint",4  ],
                             ["3G Overcharging 3G Actual Overcharging",8  ]  

                       ]
            }]
        });

});
</script>

CSS文件 

body {
    background:#F7F4E9 url(body.png) repeat-x top center;
}
small {
    color:#888
}

th,#navigation,.active,input[type=submit],.pagination a:hover,.date td a:hover {
    background:#434A48;
    color:#fff
}

select, textarea, input, td {
    background:#fff url(gradient.png) repeat-x 0 -28px
}
tr {
    background-position:0 -18px;
}
#content {
    background-position:0 1px;
}

.active, th, #navigation a, input[type=submit] {
    color:blue;
}

input, select, textarea {
    border-color:#ddd
}

h1,h2,h3,h4,h5,h6 {
    border-color:#ddd
}

a {
    color:#888
}

#head {
    background:##FFFFFF
}

#navigation a:hover {
    background:black
}
#navigation .active {
    background:red
}

.box,.box > .utils a {
    background:#fff;
    border-color:#eee
}
.box > h2 {
    background:url(box-h2.png) repeat-x bottom center #fff
}
#container{
    width:100%;
    height:100%;
    position:relative;
    border:1px solid black;
}
.box{display:block;}
#info, #complaint{float:left;}
.middle{top:100%;margin-top:-50px;/*half of the .box height*/}


.info{left:0;}
.complaint{right:0;}

3 个答案:

答案 0 :(得分：3)

给所有div一个风格

浮动：左;

将以下代码添加到您的css中

 #tabbar div
        {
            float:left;
            padding: 10px;
        }
        #info
        {
           clear: left
        }
         #navigation li
        {
            width:100px;
            display: inline-block;
        }

并且永远不会给你在投诉标签中给出的两个部门提供相同的ID，所以请更改它..！

它会工作..！

答案 1 :(得分：0)

您需要将display css属性设置为＆＃39; inline-block＆＃39;。这将使它的行为类似于传统的div-block模型，但它也允许它们水平堆叠，就像跨度一样。

DIV.FloatBox {display:inline-block;*display:inline;zoom:1;} /* Extra display + zoom is for IE

您可以考虑的另一件事是您可以使用CSS属性模拟表格。这意味着您可以在某些情况下（即小屏幕尺寸）将其分解为DIV行为，但您仍然可以使其表现得像表格。

<div style="display:table">
   <div style="display:table-row">
      <div style="display:table-cell">
      </div>
   </div>
</div>

答案 2 :(得分：0)

为所有div提供相同的类（例如class =“div”）。

然后，将这些行添加到CSS文件中：

.div {
display:inline:
}

我认为这会奏效。另外，请确保您的#tabbat足够宽以适应所有三个div。

相关问题
最新问题