左右布局

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




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值