zoukankan      html  css  js  c++  java
  • CSS实现多个Div等高,类似表格布局

    <%@ 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>
  • 相关阅读:
    perf-stat
    perf原理
    ubuntu中Docker的安装与使用
    NVM相关手册及新特性理解
    #2018BIT软件工程基础#结对项目:四则运算题目生成
    #2018BIT软件工程基础#个人项目:数独
    第一篇博文:自我介绍&新学期展望
    越早明白这些道理,越能少走一些弯路
    把知识连接起来就是创意
    【翻译】24款界面精美的免费UI工具包
  • 原文地址:https://www.cnblogs.com/geniussoft/p/4875324.html
Copyright © 2011-2022 走看看