一个DIV 里放3平行的个DIV

w4585 2010-08-15 01:49:32



#main {

	padding-right: 45px; padding-left: 45px;  padding-bottom: 20px; padding-top: 45px; height: auto! important

}



#logo {

	float: left; width:20%; height: 120px; 

}



#flash { width:60%; height:400px; float:left; display:inline}



#right-top {width:100px; float:left; display:inline}



<div id="main">

<div id="home-top">

<div class="clear"></div>

<div id="logo"></div>

</div>

	<div id="flash"><img src="images/daily-bg.jpg" /></div>

	<div id="right-top"><img src="images/right_top.gif" /></div>



</div>

想实现 div logo flash right-top 3个DIV图片一行水平但是 IE里 right-top 在下边这个应该是图片太宽了
但是在火狐里 3个DIV都在同一水平线但是 right-top 是靠右侧的。。完全不懂。。各位看代码就发现我曾经想用百分比设置不过也没成功求指教

...全文

668 20 打赏收藏转发到动态举报

写回复

用AI写文章

20 条回复

切换为时间正序

请发表友善的回复…

发表回复

W8746988 2010-08-30

打赏
举报

http://hi.csdn.net/invite.php?u=3370434&c=9cb528505d2f42a0 加好友

ihefe 2010-08-27

打赏
举报

把图片设置宽度，或者设置自适应，#main 设置最小宽度(min-width:550px;)防止浮动时，浏览器缩小布局变形.

路伊阑珊 2010-08-27

打赏
举报

overflow:hidden; 加上这个避免宽度过长撑开了你那个跑到第二行应该就是宽度的问题

走在风中 2010-08-27

打赏
举报

[Quote=引用 6 楼 natici 的回复:]
lz看这样是否符合你的原意？

HTML code

<!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">
<……
[/Quote]
牛人，经常看到你精彩的回复。

幸运的意外 2010-08-27

打赏
举报

对main里的3个div分别控制他们的样式就可以了。

cyblalayo 2010-08-26

打赏
举报

新手看不大懂哦

accpliuya 2010-08-26

打赏
举报

只要给main或者home-top设一个宽度就可以了，试试看~

zabcd117 2010-08-24

打赏
举报

木看明白lz要啥效果

alohau 2010-08-23

打赏
举报

去跨浏览器开发问吧，答案会比较专业！！

yingying901029 2010-08-20

打赏
举报

把LOGO的CSS 改成#home-top就行了

战斗生活 2010-08-19

打赏
举报

用table试试看啊

风之影子 2010-08-19

打赏
举报

用行级span进行定位。

duwu06 2010-08-19

打赏
举报

给main定义一个宽度

tf5221xp 2010-08-17

打赏
举报

怎么感觉问题都没人理啊？

natici 2010-08-16

打赏
举报

lz看这样是否符合你的原意？



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

<style type="text/css">

*{

	margin:0;

	padding:0;

}

#main {

    padding-right: 45px; padding-left: 45px;  padding-bottom: 20px; padding-top: 45px;

}



#home-top {

    float: left; width:20%; height: 120px; overflow:hidden;

}



#flash { width:60%; height:400px; float:left; display:inline;overflow:hidden;}



#right-top {width:20%; float:left; display:inline;overflow:hidden;}

.clear{

	clear:both;

}

</style>

</head>



<body>

<div id="main">

    <div id="home-top">

        <div id="logo"></div>

    </div>

    <div id="flash"><img src="images/daily-bg.jpg" /></div>

    <div id="right-top"><img src="images/right_top.gif" /></div>

    <div class="clear"></div>

</div>



</body>

</html>

hhh194 2010-08-15

打赏
举报

怎么样设置，就是要计算好你设置的3个元素的容器宽度加上边距，padding什么的不要超出main容器的宽度，多一个px也会导致框架乱七八糟，你可以尝试用ul和li来布局，例如
<style>
#nav{
margin:0px; padding:0px;
list-style-type:none;
height:32px;
font-size:12px;
}
#nav li{
text-align:center; width:80px; height:32px;
background-color:red;
float:left;
}
#nav li a{
padding:10px 0px 10px 0px;
text-decoration:none;
display:block;
}
#nav li a:link, #nav li a:visited{color:#526d00;}
#nav li a:hover{
color:#FFFFFF;
background-color:#000000
}
</style>
<div id=nav>
<ul>
<li><a href="#">首页导读</a></li>
<li><a href="#">推荐版面</a></li>
<li><a href="#">推荐文章</a></li>
<li><a href="#">人气排名</a></li>
<li><a href="#">新开讨论区</a></li>
<li><a href="#">休闲娱乐</a></li>
<li><a href="#">常见问题</a></li>
</ul>
</div>

w4585 2010-08-15