【宝信IPLAT4J.V6】EFRegion实现左右布局的两种方式

方式一   style设置为table

<div style="display: table;width: 100%;">
	<div style="display: table-row;">
		<div style="display: table-cell;width: 75%;padding-right: 10px;">
			<EF:EFRegion id="inqu" title="查询条件">
				<EF:EFInput ename="inqu_status-0-asmatName" cname="资材名称" colWidth="4" />
				<EF:EFDatePicker ename="inqu_status-0-timeFrom" cname="时间起" colWidth="4">
				</EF:EFDatePicker>
				<EF:EFDatePicker ename="inqu_status-0-timeTo" cname="时间止" colWidth="4" >
				</EF:EFDatePicker>
			</EF:EFRegion>
		</div>
		<div style="display: table-cell;width: 25%; padding-left: 10px;">
			<EF:EFRegion id="data" title="数据生成">
				<EF:EFDatePicker ename="inqu_status-0-genTime" cname="时间" format="yyyy-MM"
									 parseFormats="['yyyyMM','yyyy-MM']" required="true" colWidth="9"
									 data-regex="/^[0-9]{4}-((0[1-9])|(1[012]))$/" data-errorprompt="请输入正确的日期格式"/>
				<div style="float: right"><EF:EFButton ename="gen" cname="生成" /></div>
			</EF:EFRegion>
		</div>
	</div>
</div>

*注：第三层div的width属性合计需为100%

实现效果

压缩效果

• 优点：整体左右边框能与下层布局控件对齐，且压缩后仍能保持左右结构
• 缺点：需要进行三层div嵌套
  
  

方式二   class设置为col-md

<div style="width: 100%;">
	<div class="col-md-9">
		<EF:EFRegion id="inqu" title="查询条件">
			<EF:EFInput ename="inqu_status-0-backlogDesc" cname="工序" colWidth="4" type="hidden"/>
			<EF:EFInput ename="inqu_status-0-energyDesc" cname="能源名称" colWidth="4" />
			<EF:EFDatePicker ename="inqu_status-0-timeFrom" cname="时间起" colWidth="4">
			</EF:EFDatePicker>
			<EF:EFDatePicker ename="inqu_status-0-timeTo" cname="时间止" colWidth="4">
			</EF:EFDatePicker>
		</EF:EFRegion>
	</div>
	<div class="col-md-3">
		<EF:EFRegion id="data" title="数据生成">
			<EF:EFDatePicker ename="inqu_status-0-genTime" cname="时间" format="yyyy-MM"
									 parseFormats="['yyyyMM','yyyy-MM']" required="true" colWidth="9"
									 data-regex="/^[0-9]{4}-((0[1-9])|(1[012]))$/" data-errorprompt="请输入正确的日期格式"/>
			<div style="float: right"><EF:EFButton ename="gen" cname="生成" /></div>
		</EF:EFRegion>
	</div>
</div>

*注：第二层col-md后的格数合计需为12

实现效果

压缩效果

• 优点：只需要嵌套两层div，且压缩后变换为上下结构
• 缺点：整体左右边框比下层布局控件要窄