我试图在我的页面中显示两个不同的窗口，我定义了两个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;}
答案 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>