我有一些HTML:
<body>
<h1 id="header"></h1>
<div id="container">
<div id="left">
</div>
<div id="content">
<div id="titlebar">
<span id="date">Novermber 13, 3414</span>
<span id="title"> The importance of being earnest.</span>
<span id="author">HG Wellwhocares</span>
</div>
<iframe id="memo" />
<div id="attachments"></div>
<p id="description"></p>
<div id="action">
<div id="accept">Accept</div>
<div id="revise">Revise</div>
</div>
</div>
</div>
</body>
还有一些css:
#container{
width: 85%;
margin: 0 auto;
background: gray;
}
#left{
float: left;
width: 20%;
padding: 1%;
}
#left:after{
clear: both;
}
#content{
margin-left: 22%;
background: silver;
padding: 3em;
}
#titlebar{
text-align: center;
}
#date{
float: left;
}
#title{
clear: both;
}
#author{
float: right;
}
#memo{
width: 100%;
min-height: 500px;
}
还有这个jQuery:
months = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
$(document).ready(function(){
items = new Array();
$.getJSON('_vti_bin/listdata.svc/BOTMemos?$orderby=MeetingDate', function(data){
date = "";
$.each(data.d.results, function(index, value){
if(value.MeetingDate!=null){
if(value.MeetingDate!=date){
if(date!=""){
$('#left').append('<hr />');
}
item = new Array(value.MeetingDate, value.Title0, value.Checkers);
date = value.MeetingDate;
month = months[parseInt(date.substring(5,7), 10)-1];
formattedDate = month + " " + date.substring(8,10) + ", " + date.substring(0, 4);
$('#left').append('<h1>'+formattedDate+'</h1>');
}
$('#left').append('<h2 class="memo">'+value.Title0+'</h2>');
}
});
});
});
这导致两种不同的布局,这在ie9中: 这在ie7中: 我的两个问题是:
<span>
div中的三个#titlebar
标记不会像ie9那样在ie7中并排显示?答案 0 :(得分:2)
使用float:left
作为日期,作者和标题span
,就像这样
#titlebar span {
float:left;
}
并且对于文本对齐使用此代码也添加宽度:
#date {
text-align: left;
width: 33%;
}
#title{
text-align: center;
width: 34%;
}
#author{
text-align: right;
width: 33%;
}
请参阅IE7中的演示,其中包含更新的链接:http://jsfiddle.net/rathoreahsan/Jy7Sz/
编辑:
用以上代码替换此代码:
#date{
float: left;
}
#title{
clear: both;
}
#author{
float: right;
}
已编辑:答案已更新
答案 1 :(得分:0)
为什么#titlebar div中的三个标签不会像ie9那样在ie7中并排显示? 你需要给他们一个宽度: 像
#titlebar span { 宽度:33%; 向左飘浮; }
您需要在标题中为ie7 + ie8创建一个新的样式表。他们以不同的方式呈现内容而不是一切都得到支持
<!--[if lt IE 9]>
<link rel="stylesheet" href="/css/ie-fixes.css">
<![endif]-->
答案 2 :(得分:0)
1)由于您的#left
容器内没有任何内容,因此没有显示任何内容。
<body>
<h1 id="header"></h1>
<div id="container">
<div id="left">
<!-- Insert content here. -->
</div>
<div id="content">
<div id="titlebar">
<span id="date">Novermber 13, 3414</span>
<span id="title"> The importance of being earnest.</span>
<span id="author">HG Wellwhocares</span>
</div>
<iframe id="memo" />
<div id="attachments"></div>
<p id="description"></p>
<div id="action">
<div id="accept">Accept</div>
<div id="revise">Revise</div>
</div>
</div>
</div>
</body>
2)没有明确宽度的所有div占据宽度的100%空间。
#container{
width: 85%;
margin: 0 auto;
background: gray;
}
#left{
float: left;
width: 20%;
padding: 1%;
}
#left:after{
clear: both;
}
#content{
margin-left: 22%;
background: silver;
padding: 3em;
}
#titlebar{
text-align: center;
}
#date {
float: left;
width: 30%;
}
#title {
float: left;
width: 40%;
}
#author {
float: right;
width: 30%;
}
#memo{
width: 100%;
min-height: 500px;
}