需求：
需要在某个界面进行左中右布局，例如当当网的书籍检索：
我们需要做成这个样子
背景颜色为统一的。右侧为白底色
所以我们用
左右布局
右中在包括 左右
然后我们实现的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0px; padding: 0px;}
.SCont{
width: 100%;
height: 500px;
}
.no{
width: 100%; height: auto;border: 1px solid red ; background-color: yellow; }
.nol{
float: left; width: 100px; }
.nor{
margin: 0 0 0 100px; padding-right: 150px; background-color: white;position:relative;}
.norc{
position:absolute;right:60px;top:0px}
</style>
</head>
<body>
<!-- background-color: red; -->
<div class="SCont" >
<div class="no" >
<div class="nol" >左边</div>
<div class="nor" >
<div>内容内容内内容内容 </div><div class="norc" >多选更多</div></div>
</div>
</div>
</body>
</html>
结合到我们的vue 项目中的为：
<style lang="scss" scoped>
// this a check style
.SCont{
width: 100%; height: 500px; }
.no{
width: 100%; height: auto; background-color: #fef8f5; }
.nol{
float: left; width: 100px; span{
line-height: 35px;} }
.nor{
margin: 0 0 0 100px; padding-right: 150px; background-color: white;position:relative;line-height: 35px;}
.norc{
position:absolute;right:60px;top:0px;min-height: 35px;}
.nor_1,.nor_2,.nor_3{
min-height: 35px;}
.pub{
width: 100%; height: auto; background-color: #fef8f5; }
.publ{
float: left; width: 100px; span{
line-height: 35px;} }
.pubr{
margin: 0 0 0 100px; padding-right: 150px; background-color: white;position:relative;line-height: 35px;}
.pubc{
position:absolute;right:60px;top:0px;min-height: 35px;}
.pubr_1,.pubr_2,.pubr_3{
min-height: 35px;}
.gat{
width: 100%; height: auto; background-color: #fef8f5; }
.gatl{
float: left; width: 100px; span{
line-height: 35px;} }
.gatr{
margin: 0 0 0 100px; padding-right: 150px; background-color: white;position:relative;line-height: 35px;}
.gatc{
position:absolute;right:60px;top:0px;min-height: 35px;}
.gatr_1,.gatr_2,.gatr_3{
min-height: 35px;}
.prc{
width: 100%; height: auto; background-color: #fef8f5; }
.prcl{
float: left; width: 100px; span{
line-height: 35px;} }
.prcr{
margin: 0 0 0 100px; padding-right: 150px; background-color: white;position:relative;line-height: 35px;}
.prcc{
position:absolute;right:60px;top:0px;display: none;;min-height: 35px;}
.dat{
width: 100%; height: auto; background-color: #fef8f5; }
.datl{
float: left; width: 100px; span{
line-height: 40px;} }
.datr{
margin: 0 0 0 100px; padding-right: 150px; background-color: white;position:relative;line-height: 40px;}
.datc{
position:absolute;right:60px;top:0px;display: none;;min-height: 40px;}
.is{
width: 100%; height: auto; background-color: #fef8f5; }
.isl{
float: left; width: 100px; span{
line-height: 60px;}}
.isr{
margin: 0 0 0 100px; padding-right: 150px; background-color: white;position:relative;line-height: 60px;}
.isc{
position:absolute;right:60px;top:0px;display: none;;min-height: 60px;}
.key{
width: 100%; height: auto; background-color: #fef8f5; }
.keyl{
float: left; width: 100px; span{
line-height: 35px;} }
.keyr{
margin: 0 0 0 100px; padding-right: 150px; background-color: white;position:relative;line-height: 35px;}
.keyc{
position:absolute;right:60px;top:0px; display: none;;min-height: 35px;}
/
</style>
<!-- 条件检索区域 -->
<div class="SCont">
<!-- top 1 中图 -->
<div class="no">
<div class="nol">
<span> 中图分类</span></div>
<div class="nor">
<div>
<div v-show="SuperbSearch.Show_no ===1" class="nor_1">
<span v-for="(item,i) in SuperbSearch.SelectCheckClassNo.slice(0,4)" :key="i">
<a href="#">{
{
item.className}}</a>
</span>
</div>
<div v-show="SuperbSearch.Show_no ===2" class="nor_2">
<span v-for="(item,i) in SuperbSearch.SelectCheckClassNo" :key="i">
<a href="#">{
{
item.className}}</a>
</span>
</div>
<div v-show="SuperbSearch.Show_no ===3" class="nor_3">
<el-checkbox-group
v-model="SuperbSearch.SelectCheckClassNoValue"
class="Show_classno_c_3S" >
<el-checkbox
v-for="(select_classno,index) in SuperbSearch.SelectCheckClassNo"
:key="index"
:label="select_classno.className"
name="type"
></el-checkbox>
</el-checkbox-group>
</div>
</div>
<div class="norc"><span @click="norc_t_m(2);" >更多</span><span @click="norc_t_t(3);">多选</span></div>
</div>
</div>
<!-- top 1 -->
<!-- top 2 出版社 -->
<div class="pub">
<div class="publ"> <span>出版社</span> </div>
<div class="pubr">
<div>
<div v-show="SuperbSearch.Show_pub ===1" class="pubr_1">
<span v-for="(item,i) in SuperbSearch.SelectCheckSub.slice(0,6)" :key="i">
<a href="#">{
{
item.orgName}}</a>
</span>
</div>
<div v-show="SuperbSearch.Show_pub ===2" class="pubr_2">
<span v-for="(item,i) in SuperbSearch.SelectCheckSub" :key="i">
<a href="#">{
{
item.orgName}}</a>
</span>
</div>
<div v-show="SuperbSearch.Show_pub ===3" class="pubr_3">
<el-checkbox-group v-model="SuperbSearch.SelectCheckSubValue">
<el-checkbox
v-for="(item,index) in SuperbSearch.SelectCheckSub"
:key="index"
:label="item.orgName"
name="type"
></el-checkbox>
</el-checkbox-group>
</div>
</div>
<div class="pubc"><span @click="pubc_t_m(2);" >更多</span><span @click="pubc_t_t(3);">多选</span></div>
</div>
</div>
<!-- top 2 -->
<!-- top 3 学科分类 -->
<div class="gat">
<div class="gatl"><span>学科分类</span> </div>
<div class="gatr">
<div>
<div v-show="SuperbSearch.Show_gat ===1" class="gatr_1" >
<span v-for="(item,i) in SuperbSearch.SelectCheckNav.slice(0,9)" :key="i">
<a href="#">{
{
item.navName}}</a>
</span>
</div>
<div v-show="SuperbSearch.Show_gat ===2" class="gatr_2">
<span v-for="(item,i) in SuperbSearch.SelectCheckNav" :key="i">
<a href="#">{
{
item.navName}}</a>
</span>
</div>
<div v-show="SuperbSearch.Show_gat ===3" class="gatr_3">
<el-checkbox-group v-model="SuperbSearch.SelectCheckNavValue">
<el-checkbox
class="selectno"
v-for="(item,index) in SuperbSearch.SelectCheckNav"
:key="index"
:label="item.navName"
name="type"
></el-checkbox>
</el-checkbox-group>
</div>
</div>
<div class="gatc"><span @click="gatc_t_m(2);" >更多</span><span @click="gatc_t_t(3);">多选</span></div>
</div>
</div>
<!-- top 3 -->
<!-- top 4 价格范围 -->
<div class="prc">
<div class="prcl"><span>定价</span> </div>
<div class="prcr">
<div>
<el-input-number
v-model="SuperbSearch.minmoney"
:precision="2"
@change="handleChange"
size = "mini"
:min="0"
:max="10"
label="描述文字"
></el-input-number> ---
<el-input-number
v-model="SuperbSearch.maxmoney"
:precision="2"
@change="handleChange"
size = "mini"
:min="1"
:max="10"
label="描述文字"
></el-input-number>
</div>
<div class="prcc">多选更多</div>
</div>
</div>
<!-- top 4 -->
<!-- top 5 出版日期 -->
<div class="dat">
<div class="datl"><span>出版日期</span> </div>
<div class="datr">
<div>
<el-date-picker v-model="SuperbSearch.StartTime" type="date" placeholder="出版开始日期"></el-date-picker>
<el-date-picker v-model="SuperbSearch.EndTime" type="date" placeholder="出版结束日期"></el-date-picker>
</div>
<div class="datc">多选更多</div>
</div>
</div>
<!-- top 5 -->
<!-- top 6 ISBN -->
<div class="is">
<div class="isl"><span>ISBN</span> </div>
<div class="isr">
<div>
<el-input
v-model="SuperbSearch.ISBN"
type="textarea"
placeholder="ISBN: 支持多个ISBN请逗号分隔，例如 978-7-5685-1578-8,978-7-5685-1578-7"
></el-input>
</div>
<div class="isc">多选更多</div>
</div>
</div>
<!-- top 6 -->
<!-- top 7 重点书 -->
<div class="key">
<div class="keyl"><span>重点书</span> </div>
<div class="keyr">
<div>
<el-radio v-model="SuperbSearch.keyStatus" label="是" value="是">是</el-radio>
<el-radio v-model="SuperbSearch.keyStatus" label="否" value="否">否</el-radio>
</div>
<div class="keyc">多选更多</div>
</div>
</div>
<!-- top 7 -->
</div>
这样就能完美解决我们的问题了