float:left如何解决宽度变化后被挤下去呀

skyyun 2014-01-01 06:21:18
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
#ct {
width:100%;
}
#left {
width:500px;
height:400px;
float:left;
background-color:red;
}
#right {
float:left;
height:400px;
background-color:yellow;
}
.clear {
clear:both;
}
</style>
</head>
<body>
<div id="ct">
<div id="left">这是左边的,宽度会变化的</div>
<div id="right">这是右边的,宽度是不会变的,如何让右边的框,无论左边的宽度怎么变化,都靠在左边的旁边</div>
<div class="clear"></div>
</div>
</body>
</html>
...全文
1145 2 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
张运领 2014-01-01
  • 打赏
  • 举报
回复
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312"/>
    <title></title>
    <style>
        #ct {
            width:100%;
        }
        #left {
            height:400px;
            background-color:red;
			margin-right:400px;
        }
        #right {
            float:right;
            height:400px;
			width:400px;
            background-color:yellow;
        }
        .clear {
           clear:both;
        }
    </style>
</head>
<body>
    <div id="ct">
		<div id="right">这是右边的,宽度是不会变的,如何让右边的框,无论左边的宽度怎么变化,都靠在左边的旁边</div>
        <div id="left">这是左边的,宽度会变化的</div>
        <div class="clear"></div>
    </div>
</body>
</html>
你说的那种,没有办法做到的 可是如果你说,右侧是固定的,左侧是自适应的,是可以的,例如上面给你的这个例子。 基本思想就是,先把一个固定的框向右浮动,然后把第二个框,不让他浮动,并且设置这个框的右侧外边距,等于刚才右侧固定的那个浮动框,这样就可以表现为,不管浏览器视口怎么变化,右侧的宽度都是不变的,左侧的宽度,就是剩下那些宽度。 不知道你是不是想要的这个效果?

61,129

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧