Div Alignment＆amp;分配

时间：2014-08-22 06:09:37

标签： php html css

我试图在我的页面中显示两个不同的窗口，我定义了两个div（信息，投诉）。我想在屏幕左侧显示 info div ，在屏幕右侧显示投诉div <{0}}，这是我的代码。请看一下并建议我改变。

小提琴代码： 

    <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 

<!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文件

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;}

4 个答案:

答案 0 :(得分：0)

我建议设置两个div的宽度，然后将它们作为内联元素。例如：

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

在CSS中：

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

这将显示彼此相邻的两个元素，它们将占据包含元素的50％。使它们成为内联块元素将阻止它们向下推动其他元素。

大多数人建议不要使用花车，否则会引起一些奇怪的问题。它们主要用于使图像周围的文本流动。

答案 1 :(得分：0)

摆脱＆＃34;对齐＆＃34;在两个div中添加：

#info, #complaint{float:left;}

或

.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%;}

答案 2 :(得分：0)

只需在里面更新

<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>

答案 3 :(得分：0)

你可以这样做，就像下面的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;
}

和2.然后代码如下; 

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

相关问题
最新问题