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>

...全文

1147 2 打赏收藏转发到动态举报

写回复

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

你说的那种，没有办法做到的可是如果你说，右侧是固定的，左侧是自适应的，是可以的，例如上面给你的这个例子。基本思想就是，先把一个固定的框向右浮动，然后把第二个框，不让他浮动，并且设置这个框的右侧外边距，等于刚才右侧固定的那个浮动框，这样就可以表现为，不管浏览器视口怎么变化，右侧的宽度都是不变的，左侧的宽度，就是剩下那些宽度。不知道你是不是想要的这个效果？