布局方式，两列三列布局中间自适应
<!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;
}
}