其他分享
首页 > 其他分享> > 布局方式，两列三列布局中间自适应

布局方式，两列三列布局中间自适应

作者：互联网

                   

布局方式，两列三列布局中间自适应

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/> 
        <title>web前端</title>
        <meta name="description" content="web前端" /> 
        <meta name="keywords" content="web前端" />
        <link rel="stylesheet" href="css/index.css"/>
    </head>
    <body>
        <div class="k_main m960">
            <div class="clears kw">
                <div class="k_content">content</div>
                <div class="k_side">left</div>
            </div>
        </div>


        <div class="k_main m960 t10">
            <div class="clears kw">
                <div class="k_content">content</div>
                <div class="k_side2">right</div>
            </div>
        </div>
        <div class="k_main m960 t10">
            <div class="clears kw">
                <div class="k_content">content</div>
                <div class="k_side2">right</div>
                <div class="k_side">left</div>
            </div>
        </div>
        <div class="k_main m960 t10">
            <div class="clears kw">
                <div class="k_content">content</div>
                <div class="k_side2">right</div>
                <div class="k_side">left</div>
                <div class="k_side3">left</div>
            </div>
        </div>
        <div class="k_main m960 t10">
            <div class="clears kw">
                <div class="k_content">content</div>
                <div class="k_side">left</div>
            </div>
        </div>
        <div class="k_main m960 t10">
            <div class="clears kw">
                <div class="k_content">content</div>
                <div class="k_side">left</div>
            </div>
        </div>
    </body>
</html>
HTML 
body,textarea,input,select,option {font-size:12px;color:#333;font-family:'Microsoft Yahei',Tahoma,Arial,sans-serif;}h1,h2,h3,h4,h5,h6 {font-size:100%;}body,h1,h2,h3,h4,h5,h6,blockquote,ol,ul,dl,dd,p,textarea,input,select,option,form {margin:0;}ol,ul,textarea,input,option,th,td {padding:0;}table {border-collapse:collapse;}li {list-style-type:none;}.clears:before,.clears:after {content:'';display:table;}.clears:after {clear:both;}.clears {*zoom:1;}.clear {clear:both;height:0;overflow:hidden;}a {text-decoration:none;color:#333;}a,textarea,input,select {outline:none}textarea {overflow:auto;resize:none;}.img img {display:block;}a img {border:none;}.z_index{position:fixed;_position:absolute;z-index:999;display:none;overflow:hidden;}.pr {position:relative;}.pa {position:absolute;}.fl {float:left;}.fr {float:right;}
a:hover{text-decoration:underline;}.m960 {margin:0 auto;width:960px;}.t10 {margin-top:10px;}



.k_content {float:left;width:100%;height:100px;background-color:red;}

.k_side {float:left;width:190px;height:100px;background-color:blue;margin-left:-100%;}


.k_side2 {float:left;width:190px;height:100px;background-color:blue;margin-left:-190px}
.k_side3 {float:left;width:190px;height:100px;background-color:blue;margin-left:-390px}
CSS

两列 三列布局

<div className="k_box clearfix">
    <div className="k_box_f fl">左</div>
    <div className="k_box_r">右</div>
</div>
<div className="k_box clearfix">
    <div className="k_box_f fl">左</div>
    <div className="k_box_f fr">右</div>
    <div className="k_box_c">中</div>
</div>
<div className="k_box clearfix pr">
    <div className="k_box_f pa">左</div>
    <div className="k_box_r">中</div>
</div>
<div className="k_box_flex">
    <div className="k_box_f">左</div>
    <div className="k_box_r">中</div>
</div>
<div className="k_box_flex">
    <div className="k_box_f">左</div>
    <div className="k_box_c">中</div>
    <div className="k_box_f">左</div>
</div>
HTML 
.k_box {
    width:1200px;
    margin:50px auto;
    border:1px solid red;
    .k_box_f {
        width:200px;
        height:100px;
        background: red;
    }
    .k_box_r {
        margin-left:210px;
        height:100px;
        background: red;
    }
    .k_box_c {
        margin:0 210px;
        height:100px;
        background: red;
    }
}

.k_box_flex {
    width:1200px;
    margin:50px auto;
    border:1px solid red;
    display: flex;
    .k_box_f {
        width:200px;
        height:100px;
        background: red;
    }
    .k_box_r {
        flex: 1;
        margin-left:10px;
        height:100px;
        background: red;
    }
    .k_box_c {
        flex: 1;
        margin: 0 10px;
        height:100px;
        background: red;
    }
}

标签：布局,100px,三列,height,background,两列,margin,red,left
来源： https://www.cnblogs.com/xfswy/p/15012704.html