css 布局自适应

最新推荐文章于 2024-10-10 12:15:57 发布

wtcsy

最新推荐文章于 2024-10-10 12:15:57 发布

阅读量892

点赞数

分类专栏： CSS 文章标签： css class div float border 文档

本文链接：https://blog.youkuaiyun.com/wtcsy/article/details/7734675

版权

CSS 专栏收录该内容

3 篇文章

订阅专栏

css布局自适应

布局一般就是左右2栏目(其中一栏固定一栏自适应) 左中右3栏(一般中间自适应)

2栏目

左边固定右边自适应外围容器90%

写法一

左边左浮动右边不浮动设置margin-left ：numpx num为左边的宽度

这种写法的好处

简单容易看懂兼容性好切不用引进多余的元素

不好的地方

ie6下有3像素的bug 其他的问题好像没发现

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ceshi</title>
<style type="text/css">
*{margin:0;padding:0;}
.warp{width:90%; border:1px solid #000; min-width:500px; margin:0 auto;}
.warp .l{width:200px; background-color:#066; height:300px; float:left;word-wrap: break-word;}
.warp .m{background-color:#FC6; height:300px; margin-left:200px;word-wrap: break-word;;}
</style>
</head>
<body>
	<div class="warp">
    	<div class="l">
        	<div>111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
        </div>
        <div class="m">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    </div>
</body>
</html>

写法二

右边自适应的在前面可以让自适应的东东先加载左浮动然后左边的那块margin-left:-100%到左边来

好处

可以让右边的东西先加载出来

坏处

ie6下有问题另外多引进了inne的div

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="textml; charset=utf-8">
<title>无标题文档</title>
<style>
html,body{margin:0;padding:0;}
.warp{width:90%; border:1px solid #000; min-width:500px; margin:0 auto;}
.m{width:100%;float:left;}
.inner{margin-left:200px;background:#093;height:300px;word-wrap: break-word;}
.l{float:left;width:200px;margin-left:-100%;background:#09F;height:300px;word-wrap: break-word;}
</style>
</head>
<body>
<div class="warp">
    <div class="m">
        <div class="inner">111111111111111</div>
    </div>
    <div class="l">222222222222222222222222222222222222222222222222222222222</div>
</div>
</body>
<ml>

写法三

右边自适应的在前面右浮动同时magin-left:-numpx ; num为左边的宽度然后左边的左浮动

好处

好像还没发现兼容性的问题

坏处

多引进了一个元素

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="textml; charset=utf-8">
<title>无标题文档</title>
<style>
html,body{margin:0;padding:0;}
.warp{width:90%; border:1px solid #000; min-width:500px; margin:0 auto;}
.m{width:100%;float:right; margin-left:-200px;}
.inner{margin-left:200px;background:#093;height:300px;word-wrap: break-word;}
.l{float:left;width:200px;background:#09F;height:300px;word-wrap: break-word;}
</style>
</head>
<body>
<div class="warp">
    <div class="m">
        <div class="inner">111111111111111</div>
    </div>
    <div class="l">222222222222222222222222222222222222222222222222222222222</div>
</div>
</body>
<html>

3栏目

写法一

和2栏目的第一个是一样的

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
html,body{margin:0;padding:0;}
.warp{ width:90%; margin:0 auto; overflow:hidden;}
.warp .l{ height:300px; width:200px; float:left; background:#F00;word-wrap: break-word;}
.warp .r{ height:300px; width:300px; float:right; background:#00F;word-wrap: break-word;}
.warp .m{ height:300px;  background:#0F0; margin:0 300px 0 200px;word-wrap: break-word;}
</style>
</head>
<body>
	<div class="warp">
    	<div class="l">111111111111111111111111111111111111111111111111111111111111111</div>
        <div class="r">222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</div>
        <div class="m">3333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333</div>
    </div>
</body>
</html>

写法2

更上面的第2个一样的

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
html,body{margin:0;padding:0;}
.warp{ width:90%; margin:0 auto; overflow:hidden;}
.warp .m{width:100%;float:left; }
.warp .m .inner{height:300px;background:#0F0; margin-left:200px;margin-right:300px;word-wrap: break-word;}
.warp .l{ width:200px; height:300px; background:#F00; float:left; margin-left:-100%;word-wrap: break-word;}
.warp .r{width:300px; height:300px; background:#F90;float:left; margin-left:-300px;word-wrap: break-word;}
</style>
</head>
<body>
	<div class="warp">
		<div class="m">
        	<div class="inner">1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
        </div>
        <div class="l">2222222222222222222222222222222222222222222222222222222222222222222222222222222222</div>
        <div class="r">33333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333</div>
    </div>
</body>
</html>