DIV+CSS布局问题,急(IE7下变变这么宽了,如图:)IE6和FF等浏览正常
<style>.clear{clear:both;}.style12{float:left;font-family:"新宋体";font-size:14px;color:...
<style>
.clear
{
clear:both;
}
.style12{
float:left;
font-family: "新宋体";
font-size: 14px;
color: #3A3483;
}
.tuliebiaotop
{
width: 675px;
height: 25px;
border: 1px solid #BCDBF2;
float: right;
margin-left: 5px;
background-image:url(wz1.gif);
line-height:25px;
padding-left:5px;
}
.tuliebiaonrlist{
width:660px;
margin-top:5px;
float:right;
}
.list{
overflow:hidden;
padding:10px; margin-left:5px; margin-top:5px;
width:660px;
border: 1px solid #BCDBF2;
float: right;
height:1200px;
}
.list li{
display:block;
list-style-position: outside;
list-style-type: none;
}
</style>
<div class="tuliebiaonrlist">
<div class="tuliebiaotop"><STRONG><SPAN class="style12">当前位置:</SPAN></strong>{dede:field name='position'/}</div>
<div class="list">
{dede:list pagesize='10' imgwidth='40' imgheight='40'}
<li>
<div style="float:left; overflow:hidden; line-height:55px;">[field:array runphp='yes']@me = (empty(@me['litpic']) ? "" : "<a href='{@me['arcurl']}'><img border=0 src='{@me['litpic']}'/></a>"); [/field:array]
</div>
<div style="float:right; margin-left:5px; width:630px; overflow:hidden;"><a href="[field:arcurl/]">[field:title/]</a><br />
<span>
<small>日期：</small>[field:pubdate function="GetDateTimeMK(@me)"/]<br />
<small>点击：</small>[field:click/]<br />
</span>
</div>
<div align="left">
[field:description/]...
</div>
<div style="clear:both;"></div>
<div style="border-top:solid 1px #C0C0C0; margin-top:10px;"></div><br style="line-height:10px;" />
</li>
{/dede:list}
</div>
</div> 展开
.clear
{
clear:both;
}
.style12{
float:left;
font-family: "新宋体";
font-size: 14px;
color: #3A3483;
}
.tuliebiaotop
{
width: 675px;
height: 25px;
border: 1px solid #BCDBF2;
float: right;
margin-left: 5px;
background-image:url(wz1.gif);
line-height:25px;
padding-left:5px;
}
.tuliebiaonrlist{
width:660px;
margin-top:5px;
float:right;
}
.list{
overflow:hidden;
padding:10px; margin-left:5px; margin-top:5px;
width:660px;
border: 1px solid #BCDBF2;
float: right;
height:1200px;
}
.list li{
display:block;
list-style-position: outside;
list-style-type: none;
}
</style>
<div class="tuliebiaonrlist">
<div class="tuliebiaotop"><STRONG><SPAN class="style12">当前位置:</SPAN></strong>{dede:field name='position'/}</div>
<div class="list">
{dede:list pagesize='10' imgwidth='40' imgheight='40'}
<li>
<div style="float:left; overflow:hidden; line-height:55px;">[field:array runphp='yes']@me = (empty(@me['litpic']) ? "" : "<a href='{@me['arcurl']}'><img border=0 src='{@me['litpic']}'/></a>"); [/field:array]
</div>
<div style="float:right; margin-left:5px; width:630px; overflow:hidden;"><a href="[field:arcurl/]">[field:title/]</a><br />
<span>
<small>日期：</small>[field:pubdate function="GetDateTimeMK(@me)"/]<br />
<small>点击：</small>[field:click/]<br />
</span>
</div>
<div align="left">
[field:description/]...
</div>
<div style="clear:both;"></div>
<div style="border-top:solid 1px #C0C0C0; margin-top:10px;"></div><br style="line-height:10px;" />
</li>
{/dede:list}
</div>
</div> 展开
4个回答
展开全部
怎么只有右侧的啊？这样的显示的效果我们不好看啊！
不过你可以试试：
我看到你给右侧定义的是float: right;那左侧就一定是float:left;但你给右边的层定义的却是margin-left:5px;，这是不对的，既然你都右浮动了，那这个层是一直在页面右侧的，在宽度过小的时候设margin-right有响应，你可以把右浮动改成左浮动试试，再设距左的距离。
不知道我说明白了吗！嘿嘿……
不过你可以试试：
我看到你给右侧定义的是float: right;那左侧就一定是float:left;但你给右边的层定义的却是margin-left:5px;，这是不对的，既然你都右浮动了，那这个层是一直在页面右侧的，在宽度过小的时候设margin-right有响应，你可以把右浮动改成左浮动试试，再设距左的距离。
不知道我说明白了吗！嘿嘿……
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你设了内边距 设了多少 你就得减多少 比如你的宽是660 但你设了内边左5px 你就得从660 减5 =550 这样才不会有问题 你还是多去看看教程吧
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<style>
.clear
{
clear:both;
}
.style12{
float:left;
font-family: "新宋体";
font-size: 14px;
color: #3A3483;
}
.tuliebiaotop
{
width: 655px;
height: 25px;
border: 1px solid #BCDBF2;
float: right;
background-image:url(wz1.gif);
line-height:25px;
padding-left:5px;
}
.tuliebiaonrlist{
width:660px;
margin-top:5px;
float:right;
background:#00FF33;
}
.list{
overflow:hidden;
margin-top:5px;
width:650px;
border: 1px solid #BCDBF2;
float: right;
height:1200px;
padding-left:5px;
padding-right:5px;
}
.list li{
display:block;
list-style-position: outside;
list-style-type: none;
}
</style>
<div class="tuliebiaonrlist">
<div class="tuliebiaotop"><STRONG><SPAN class="style12">当前位置:</SPAN></strong>{dede:field name='position'/}</div>
<div class="list">
{dede:list pagesize='10' imgwidth='40' imgheight='40'}
<li>
<div style="float:left; overflow:hidden; line-height:55px;">[field:array runphp='yes']@me = (empty(@me['litpic']) ? "" : "<a href='{@me['arcurl']}'><img border=0 src='{@me['litpic']}'/></a>"); [/field:array]
</div>
<div style="float:right; margin-left:5px; width:630px; overflow:hidden;"><a href="[field:arcurl/]">[field:title/]</a><br />
<span>
<small>日期：</small>[field:pubdate function="GetDateTimeMK(@me)"/]<br />
<small>点击：</small>[field:click/]<br />
</span>
</div>
<div align="left">
[field:description/]...
</div>
<div style="clear:both;"></div>
<div style="border-top:solid 1px #C0C0C0; margin-top:10px;"></div><br style="line-height:10px;" />
</li>
{/dede:list}
</div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<style>
.clear
{
clear:both;
}
.style12{
float:left;
font-family: "新宋体";
font-size: 14px;
color: #3A3483;
}
.tuliebiaotop
{
width: 655px;
height: 25px;
border: 1px solid #BCDBF2;
float: right;
background-image:url(wz1.gif);
line-height:25px;
padding-left:5px;
}
.tuliebiaonrlist{
width:660px;
margin-top:5px;
float:right;
background:#00FF33;
}
.list{
overflow:hidden;
margin-top:5px;
width:650px;
border: 1px solid #BCDBF2;
float: right;
height:1200px;
padding-left:5px;
padding-right:5px;
}
.list li{
display:block;
list-style-position: outside;
list-style-type: none;
}
</style>
<div class="tuliebiaonrlist">
<div class="tuliebiaotop"><STRONG><SPAN class="style12">当前位置:</SPAN></strong>{dede:field name='position'/}</div>
<div class="list">
{dede:list pagesize='10' imgwidth='40' imgheight='40'}
<li>
<div style="float:left; overflow:hidden; line-height:55px;">[field:array runphp='yes']@me = (empty(@me['litpic']) ? "" : "<a href='{@me['arcurl']}'><img border=0 src='{@me['litpic']}'/></a>"); [/field:array]
</div>
<div style="float:right; margin-left:5px; width:630px; overflow:hidden;"><a href="[field:arcurl/]">[field:title/]</a><br />
<span>
<small>日期：</small>[field:pubdate function="GetDateTimeMK(@me)"/]<br />
<small>点击：</small>[field:click/]<br />
</span>
</div>
<div align="left">
[field:description/]...
</div>
<div style="clear:both;"></div>
<div style="border-top:solid 1px #C0C0C0; margin-top:10px;"></div><br style="line-height:10px;" />
</li>
{/dede:list}
</div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
只给右侧css ,没给左侧的，很难判断间距是怎么撑开的。初步判断是宽度问题和浮动问题。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
请去掉所有margin，换成padding调试
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
