部门调整和分配

Question

I am trying to show two different windows in my page, I defined two divs (info, complaint). 我试图在页面中显示两个不同的窗口，我定义了两个div（信息，投诉）。 I want to show info div on left side of screen and complaint div on right side of screen like this 我想在屏幕左侧显示信息div，在屏幕右侧显示投诉div 在此处输入图片说明 , here is my code. ，这是我的代码。 Please look at it and suggest me changes. 请查看并建议我进行更改。

Fiddle Code: 小提琴代码：

    <div id="container" class="box">


        <div class="box middle left"></div>
        <div class="box middle right"></div>

</div>

#container{
    width:200px;
    height:200px;
    position:relative;
    border:1px solid black;
}
.box{
    border:1px solid black;
    position:absolute;
    width:100px;
    height:100px;    
}
.middle{top:50%;margin-top:-10px;/*half of the .box height*/}


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

index.php index.php

<!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>
    </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>
        <section>
        <div id="container" class="box">
        <div id="info" align="left">

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

        </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 File CSS文件

colours.css colours.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:red;
}

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

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

a {
    color:#888
}
a.edit {
    background-image:url(edit.png)
}
a.delete {
    background-image:url(trash.png)
}

#head {
    background:##FFFFFF
}

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

.box,.box > .utils a {
    background:#fff;
    border-color:#eee
}
.box > h2 {
    background:url(box-h2.png) repeat-x bottom center #fff
}
#container{
    width:500px;
    height:500px;
    position:relative;
    border:1px solid black;
}
.box{
    border:1px solid black;
    position:absolute;
    width:800px;
    height:600px;    
}
.middle{top:50%;margin-top:-10px;/*half of the .box height*/}


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

Answer 1

I would suggest setting the width of both divs and then making them both inline elements. 我建议设置两个div的宽度，然后将它们都设置为内联元素。 For example: 例如：

<div id="info" class="seperated"></div>
<div id="complaint" class="seperated"></div>

In CSS: 在CSS中：

.seperated{
display:inline-block;
width:50%;
}

This will display both elements next to each other, they will both take up 50% of the containing element. 这将同时显示两个元素，它们都将占包含元素的50％。 Making them inline-block elements will prevent them from pushing the other elements down. 使它们成为内联块元素将防止它们将其他元素向下推。

Most people advise against using floats, they can cause some weird issues. 大多数人建议不要使用浮子，它们可能会引起一些奇怪的问题。 They are mainly used used to make text flow around images. 它们主要用于使文本在图像周围流动。

Answer 2

get rid of the "align" in both divs and add this: 消除两个div中的“ align”并添加以下内容：

#info, #complaint{float:left;}

or 要么

.box{display:block; 
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */}
#info, #complaint{display:inline-block; width:50%;}

Answer 3

Just update inside 只是在里面更新

<section>

<div id="container" class="box">
   <div id="top" style"widht:100%; clear:both; ">
         //if you have any content here
   </div>

   <div id="info" style"float:left; width:50%;">
         //content here
   </div>

   <div id="complaint" style"float:right; width:50%;">
        //content here
   </div>

</div>

</section>

Answer 4

You can do this like this way make css like below 你可以这样做，使css如下

.mainDiv{
width:80%;
float:left;
border:#000 solid 1px;
padding:10px;

} }

.divLeft{
width:49%;
float:left;
border:#000 solid 1px;
}

.divRight{
width:49%;
margin-left:10px;
float:left;
border:#000 solid 1px;
}

and 2. Then code like follow; 2.然后像下面的代码；

<div class="mainDiv">
<div class="divLeft">
Left Div
</div>
<div class="divRight">
Right Divs
</div>

部门调整和分配

问题描述

4 个解决方案

解决方案1
0 2014-08-22 06:16:01

解决方案2
0 2014-08-22 06:21:13

解决方案3
0 2014-08-22 06:22:58

解决方案4
0 2014-08-22 06:31:52

部门调整和分配

问题描述

4 个解决方案

解决方案1 0 2014-08-22 06:16:01

解决方案2 0 2014-08-22 06:21:13

解决方案3 0 2014-08-22 06:22:58

解决方案4 0 2014-08-22 06:31:52

解决方案1
0 2014-08-22 06:16:01

解决方案2
0 2014-08-22 06:21:13

解决方案3
0 2014-08-22 06:22:58

解决方案4
0 2014-08-22 06:31:52