首页 > Web开发 > 详细

CSS实现多个Div等高,类似表格布局

时间:2015-10-13 19:07:39      阅读:289      评论:0      收藏:0      [点我收藏+]
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sx" uri="/struts-dojo-tags"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page import="java.net.URLEncoder;" %>

<style>
table.tableClass td{padding:8px;}
.bgClass{background-color:#EEE;}
</style>

<s:hidden name="value.key" />
<center class="bgClass">
<table class="tableClass">
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td><label>组织机构代码</label></td>
        <td>
            <s:textfield name="value.organCode" size="50" cssClass="form-control"/>
        </td>
    </tr>
    <tr>
        <td><label>法人名称</label></td>
        <td>
            <s:textfield name="value.corpName" size="50" cssClass="form-control"/>
        </td>
    </tr>
    <tr>
        <td></td>
        <td><button type="button" class="btn btn-primary btn-sm" onclick="formSubmit()">保 存</button></td>
    </tr>
</table>
</center>

<center class="bgClass">
    <div class="equal">
        <div class="row">
            <div class="one"><label>组织机构代码</label></div>
            <div class="two"><s:textfield name="value.organCode" size="50" cssClass="form-control"/></div>
        </div>

        <div class="row">
            <div class="one"><label>法人名称</label></div>
            <div class="two"><s:textfield name="value.corpName" size="50" cssClass="form-control"/></div>
        </div>
        <div class="row">
            <div class="one"></div>
            <div class="four"><button type="button" class="btn btn-primary btn-sm" onclick="formSubmit()">保 存</button></div>
        </div>
    </div>
</center>
<style>
.equal{display:table;border-collapse:separate;}
.row {display:table-row;}
.row div {display:table-cell;padding:8px;}
.row .one {vertical-align:middle;}
.row .two {}
.row .three {}
.row .four {float:left;}
</style>

 

CSS实现多个Div等高,类似表格布局

原文:http://www.cnblogs.com/geniussoft/p/4875324.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!