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>
时间: 2024-10-12 11:45:47

CSS实现多个Div等高,类似表格布局的相关文章

css实现内容不相同的左右两个div等高

问题提出 现在有两个div左右排列,但是两个div的内容不相同,如何设置两个div的css做到在两个div等高排列呢? 下面是网上找的3种实现方法,觉得很有代表性,所以索性收藏起来. 方法一 通过父元素设置 overflow:hidden, div自己设置padding-bottom 和 margin-bottom来实现. <div id="#warp"> <div class="left"> <br> <br> &l

CSS中怎么让DIV居中(转载)

CSS 如何使DIV层水平居中 今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题. 可是事实上这样的方法科学吗? 经过网络搜索和亲自实验得出以下结论: 正确的也是对页面构造没有影响的设置如下: 对需要水平居中的DIV层添加以下属性: margin-left: auto; margin-right: auto; 经过这么一番设置问题似乎解决了,在FF中已经居中了,可是在IE中看竟然还是

移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )

序言:应朋友要求随手写了一下移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) ,以备后用 LESS代码: .adaptive-circle { margin: 50px auto 0; width: 80%; height: 0; padding-top: 80%; border-radius: 100%; border: 1px solid #000; box-sizing: border-box; // for .layout { height: 100%; } positi

CSS中怎么让DIV居中

CSS 如何使DIV层水平居中 今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题. 可是事实上这样的方法科学吗? 经过网络搜索和亲自实验得出以下结论: 正确的也是对页面构造没有影响的设置如下: 对需要水平居中的DIV层添加以下属性: margin-left: auto; margin-right: auto; 经过这么一番设置问题似乎解决了,在FF中已经居中了,可是在IE中看竟然还是

如何实现两个div等高效果

如何实现两个div等高效果:在网页实际应用中,可能需要动态的实现两个div的等高效果,当然不仅限于div,例如一个网页分为左右两栏,一栏的高度可能需要根据内容自适应,也就是说高度不是固定的,而另一栏需要和它保持高度一致,那么就需要动态的设置高度.代码实例如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charse

浅谈分析表格布局与Div+CSS布局的区别

(1)表格布局 表格布局容易掌握,布局方便.但表格布局需要通过表格的间距或者使用透明的gif图片来填充布局板块间的间距,这样布局的网页中表格会生成大量难以阅读和维护的代码:而且表格布局的网页要等整个表格下载完毕后才能显示所有内容,所有表格布局浏览速度较慢[2]. (2)CSS+DIV布局 通常要实现比较精确和自适应的层布局需要设置层的样式,即用CSS控制层的位置.CSS+DIV布局采用Div来定位,通过Div的border(边框).padding(填充).margin(边界)和Float(浮动)

css实现图片在div中垂直水平居中代码实例

css实现图片在div中垂直水平居中代码实例:让图片在一个元素中垂直水平居中这样的需求在实际应用中还是很多的,下面就通过代码实例介绍一下如何实现此效果.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" />

CSS+JS实现的div层定位功能和自动消失

CSS顶部固定功能,有空的时候研究了一下CSS的定位功能,做了这个大家熟悉的顶部固定功能,鼠标移上去顶部会消失,并可判断浏览器是否支持audio元素!顶部元素在时间控制下也可自动消失. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns

CSS网页错位之DIV CSS宽度计算

DIV CSS宽度计算之CSS网页布局错位(体感音乐) 为什么计算宽度计算网页像素宽度是为了CSS网页布局整齐与兼容.常见的我们布局左右结构网页或使用padding.margin布局的时候将计算整页宽度,如果不计算无论是宽度过大过小就会出现错位问题. 怎么计算CSS宽度例一:我们计算一个左右结构的布局样式.假如总宽度为400px,那么左右加起来就应当小于400px,那我们可能左边为300px,右边为100px(体感音乐)正确代码: <!DOCTYPE html> <head> &l