您的位置:海南科技网首页 > 建站经验 > 正文

CSS布局样式:左右布局,左边定宽,右边自适应

2018-03-05 22:29:53 来源:海南科技网 繁体中文 关闭 收藏 打印 复制

1.display:table width:100% 和 diplay : table-cell

<!DOCTYPE html>
<html>
<head>
    <title>table</title>
</head>
<style>
    #wrap{
        display: table;
        width: 100%;
        background-color: #eee;
    }
    .sidebar{
        display: table-cell;
        width: 300px;
        background-color: red;
    }
    .content{
        display: table-cell;
        background-color: pink;
    }
</style>

<body>
<div id="wrap">
    <div class="sidebar">sidebar</div>
    <div class="content">content</div>
</div>
</body>
</html>
2:float 单一层浮动法

例如:左侧固定成100px; 则核心代码 左侧:width:100px;float:left; 右侧 width:auto;margin-left:100px;
实例:

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>z-index</title>  
<style type="text/css">  
    *{margin:0;padding:0;}  
    .container{height:200px;}  
    .left{width:100px;border-right:none;height:50px;float:left;background-color:yellow;}  
    .right{margin-left:100px;width:auto;height:100px;background-color:blue;}  
</style>  
</head>  
<body>  
    <div class="container">  
        <div class="left"></div>  
        <div class="right"></div>  
    </div>  
</body>  
</html>  

3.定位 ,在固定元素上加入绝对定位,自适应元素设置成margin-left:固定元素的宽度

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>z-index</title>  
<style type="text/css">  
*{margin:0;padding:0;}  
.container{height:200px;}  
.left{width:100px;height:50px;background-color:blue;position:absolute;left:0;top:0;}  
.right{margin-left:100px;height:100px;background-color:yellow;}  
</style>  
</head>  
<body>  
    <div class="container">  
    <div class="left">left</div>  
    <div class="right">right</div>  
    </div>  
</body>  
</html> 

4.左边设置左浮动,右边宽度设置100%

.left{float:left;}
.right{width:100%;}

5. 父容器设置 display:flex;Right部分设置 flex:1

.container{display:flex;}
.left{width:200px;}
.right{flex:1;}

  (来源:海南科技网)

版权声明:
1.本站登载此文仅出于传递更多信息,并不意味着赞同其观点或证实其描述,不承担侵权行为的连带责任。
2.如本网信息涉及版权等问题,请于发布起15个工作日内发送邮件与本网联系,我们将及时删除处理。

相关资讯:

版权声明:
1.本站登载此文仅出于传递更多信息,并不意味着赞同其观点或证实其描述,不承担侵权行为的连带责任。
2.如本网信息涉及版权等问题,请于发布起15个工作日内发送邮件与本网联系,我们将及时删除处理。