左右布局

最新推荐文章于 2021-10-14 22:31:50 发布

梦jenny

最新推荐文章于 2021-10-14 22:31:50 发布

阅读量636

点赞数

分类专栏：布局 CSS 文章标签：布局

本文链接：https://blog.csdn.net/lulalahappy123/article/details/44813945

版权

CSS 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

布局

13 篇文章 0 订阅

订阅专栏

1、右定宽，左自适应

右边定width,float:right

html中rightside放在前面

<!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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<!--css样式开始-->
<style>
    *{margin:0 auto; padding:0; font-size:9pt;}
    .contact{width:100%; border:solid 1px red;}
    .leftside{ background:bisque; height:100px;margin-right:200px}
    .rightside{height:100px;background:#99FF99;width:200px; float:right;}
</style><!--css样式结束-->
<title>无标题文档</title>
</head>
<body><!--主体部分开始-->
<div class="contact">
    <div class="rightside">右边内容</div></span>
    <div class="leftside">左边内容</div>
</div><!--主体部分结束-->
</body>
</html>

2、左定宽，右自适应

左边定width,float:left

html中leftside放在前面

<!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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<!--css样式开始-->
<style>
    *{margin:0 auto; padding:0; font-size:9pt;}
    .contact{width:100%; border:solid 1px red;}
    .leftside{ background:bisque; height:100px;width:200px; float:left;}
    .rightside{height:100px;background:#99FF99;margin-left:200px}
</style><!--css样式结束-->
<title>无标题文档</title>
</head>
<body><!--主体部分开始-->
<div class="contact">
    <div class="leftside">左边内容</div>
    <div class="rightside">右边内容</div>
</div><!--主体部分结束-->
</body>
</html>

实现height填满屏幕

<!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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<!--css样式开始-->
<style>
    *{margin:0 auto; padding:0; font-size:9pt;height: 100%}/*由于边框会使纵轴产生scroll,去掉border*/
    .contact{width:100%; border:solid 1px red;}/*加了width由于边框会使横轴产生scroll,所以去掉width=100%或border=1px*/
    .leftside{ background:bisque; width:200px; float:left;}
    .rightside{background:#99FF99;margin-left:200px}
</style><!--css样式结束-->
<title>无标题文档</title>
</head>
<body><!--主体部分开始-->
<div class="contact">
    <div class="leftside">左边内容</div>
    <div class="rightside">右边内容</div>
</div><!--主体部分结束-->
</body>
</html>

左右position方法实现(左右布局与三栏布局不同，注意left margin-left)

<!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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin:0 auto;padding: 0;height: 100%;width: 100%}
        .leftside{position: absolute;width: 200px;background: blue;}
        .rightside{margin-left: 200px;background: red}/*不要用left或right定义边距，用margin-left；左中右可以直接用right /left*/
    </style>
</head>
<body>
<div class="contact">

    <div class="leftside">左边内容</div>
    <div class="rightside">右边内容</div>
    <!--左右布局方法2 左定宽，左position absolute.左DIV放上面-->
</div><!--主体部分结束-->
</body>
</html>

总结：左右（一边固定一边自适应）和左中右两边固定，中间自适应：

左右布局：哪个定宽，哪个用(假设左定宽)positiong:absolute,或用float：left；另一个不用right：0加absolute（因为是自适应的）而是margin-left:左宽

自由的得用margin; 固定的可以用right :0/left:0

使用负margin结合float

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
             /* *{margin: 0;padding: 0;}*/
    </style>
</head>
<body>
<em><strong><span style="color:#ff0000;"><!--右边自适应，外面加个DIV包起来。
右边的外DIV用负margin就是为了给左边能浮上来留位置，
如果负margin没够左DIV的宽，虽然右内侧的DIV据左边距为左DIV的宽，但实际上右外DIV留出来的位置不足左DIV的宽，左DIV也不能上来，
右内DIV 只需要给据左边距为左DIV宽即可--></span></strong></em>
    <div style="float: right;margin: 0 0 0 -200px; width: 100%;background: red">
        <div style="margin: 0 0 0 200px; background: #e4e4e4;">
            这是右边部分
        </div>
    </div>
   <div style="float: left; width: 200px; background: #669999">
        这是左边部分
    </div>
</body>
</html>

<!--<div>
    <div style="float: right; margin: 0 0 0 -200px; width: 100%;">
        <div style="margin: 0 0 0 200px; background: #e4e4e4;">
            这是右边部分
        </div>
    </div>
    <div style="float: left; width: 200px; background: #669999">
        这是左边部分
    </div>
</div>-->