CSS布局之一侧固定宽度一侧自适应

首先我们确定有几种方案,然后再分析其优缺点。

1、float+margin;

2、position+margin;

3、float+负margin+嵌套div;

4、display:table+display:table-cell;

上代码:

第一种方案:float+margin


<html>
<head>
    <meta content="utf-8" charset="utf-8" />
    <title>测试Css布局-左侧固定宽度右侧自适应title>
    <style>
     .wrap{background: gray; width:1000px;margin:0px auto;}
     .aside-left{width:200px;float:left; background:red; margin-left:10px;height:80px;}
     .main{margin-left:210px; background: blue; height:50px;}
     .clear{clear:both;}
    style>
head>
<body>
    <div class="wrap">
        <div class="aside-left">这是侧边div>
        <div class="main">
            这是主体
            <div class="clear">div>
            这是清除浮动后
        div>

    div>

    <div class="footer">
        <span>这是底部span>
    div>

body>
html>

这种方案,要固定宽度的float,而且要放在自适应容器的前面。

优势:简单,快。

缺点:1、当浮动的高度大于自适应的高度时,父容器在最后也没清除浮动,则父容器的高度是自适应的高度;

2、当自适应里的子容器有清除浮动时,其之后的元素会在浮动高度之下。

第二种方案:position+margin


<html>
<head>
    <meta content="utf-8" charset="utf-8" />
    <title>测试Css布局-左侧固定宽度右侧自适应title>

    <style>
     .wrap{background: gray; width:1000px;margin:0px auto; position: relative;}
     .aside-left{position: absolute; left:0px; top:0px; width:200px; height:80px;background: red; }
     .main{margin-left:210px; background: blue; }
     .clear{clear:both;}
    style>

head>
<body>

    <div class="wrap">

        <div class="aside-left">这是侧边div>

        <div class="main">
            这是主体
            <div class="clear">div>
            这是清除浮动后
        div>

    div>

    <div class="footer">
        <span>这是底部span>
    div>

body>
html>

这种布局,父容器是position:relative; 固定宽度是position:absolute; 自适应是margin;

优点:简单,方便;

缺点:当固定宽度的高度大于自适应的高度时,总体高度是和自适应的高度一致的。

第三种方案:float+负margin+嵌套div;


<html>
<head>
    <meta content="utf-8" charset="utf-8" />
    <title>测试Css布局-左侧固定宽度右侧自适应title>

    <style>
     .wrap{background: gray; width:1000px;margin:0px auto; overflow: hidden; }
     .aside-left{ width:200px; height:80px;background: red; float:left;}
     .main{background: blue;  width:100%;margin-right:-210px; float:right;}
     .main-content{margin-right:200px;}
     .clear{clear:both;}
    style>

head>
<body>

    <div class="wrap">

        <div class="aside-left">这是侧边div>

        <div class="main">

            <div class="main-content">
                这是主体
                <div class="clear">div>
                这是清除浮动后
            div>

        div>

        <div class="clear">div>

    div>

    <div class="footer">
        <span>这是底部span>
    div>

body>
html>

这种方案是,父容器overflow:hidden; 两个子容器都float, 不同的方向,然后自适应的容器负margin,在其中加个子容器包住所有的内容给个正margin。最后,清除一下浮动。

优点:能解决问题,没有什么负影响。

缺点:写法复杂。

第四种方案:display:table+display:table-cell



<html>
<head>
    <meta content="utf-8" charset="utf-8" />
    <title>测试Css布局-左侧固定宽度右侧自适应title>

    <style>
     .wrap{background: gray; width:1000px;margin:0px auto; display:table; }
     .aside-left{ width:200px; height:80px;background: red; display: table-cell;}
     .main{background: blue;  display: table-cell;}
     .clear{clear:both;}
    style>

head>
<body>

    <div class="wrap">

        <div class="aside-left">这是侧边div>

        <div class="main">
            这是主体
            <div class="clear">div>
            这是清除浮动后
        div>

    div>

    <div class="footer">
        <span>这是底部span>
    div>

body>
html>

这种方案就是父容器设置display:table;两个子容器都设置display:table-cell; 然后给固定宽度的一个宽度,自适应的就会自适应。

优点:写法简单;

缺点:浏览器兼容性:ie7+;

 

四种方案都分析完了,大家可以根据需要来做选择使用。

你可能感兴趣的:(css布局)