div 多列登高对齐

.detail_row {
    overflow :hidden;
    font-size :12px;
}
.detail_col_one, .detail_col_two, .detail_col_three, .detail_col_four,.one-row-label, .one-row-content {
    margin-bottom :-2000px;
    padding-bottom :2000px;
}
.detail_col_one, .detail_col_three, .one-row-label {
	width : 80px;
	text-align: right;
	font-weight: bold;
}
.detail_col_two, .detail_col_four {
	padding-left: 8px;
	width: 35%;
}
.detail_col_two:hover, .detail_col_four:hover, .one-row-content:hover {
	background-color: #EFFEFD;
	/* font-size: 14px; */
}
.detail_col_one, .detail_col_two, .detail_col_three, .detail_col_four, .one-row-label, .one-row-content {
	float :left;
	line-height: 170%;
}
.one-row-content {
	padding-left: 8px;
	width : 80%;
}

<div class="detail_row">
	<div class="detail_col_one">
		<nobr><fmt:message key="AddressBook.Detail.Mobile" /> :</nobr>
	</div>
	<div id="viewMobile" class="detail_col_two"></div>
	<div class="detail_col_three">
		<nobr><fmt:message key="AddressBook.Detail.Email" /> :</nobr>
	</div>
	<div id="viewEmail"  class="detail_col_four"></div>
</div>
<div class="detail_row">
	<div class="one-row-label">
		<nobr><fmt:message key="AddressBook.Detail.Jobdesc" /> :</nobr>
	</div>
	<div id="viewJobdesc" class="one-row-content"></div>
</div>

div 多列登高对齐

时间： 2024-08-28 05:38:07

div 多列登高对齐的相关文章

DIV三列同行

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus?"> <meta name="Author" content=""> <meta name="

div中的文本水平居中,一般都是用text-align:center;就可以解决,那么垂直居中呢,知道vertiacl-align:middle;但有时候却不起作用:整理下div中文本垂直居中对齐的问题(只是自己总结)1.单行文本垂直居中对齐① height=line-height即可: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml

弹性盒模型：flex多行多列两端对齐，列不满左对齐

[1]需求: [2]解决方案: 最近遇到布局上要求item两端对齐,且最后一行在列不满的情况下要求左对齐,使用flex的justify-content: space-between;实现时发现最后一行不能左对齐,而是两端对齐方式. 不是项目上想要的效果 # 网上查了一些资料,有两种方法可以实现效果:**1.添加几个空item**(对我来说最有效的,适用于大多数场景) 根据布局列数添加空item,比如每行最大n列,那么在最后添加n-2个空item即可 <html> <style>

纯css实现div三列等高布局的最简单方法简化版/也可以多列

使用正padding和负margin对冲实现多列布局方法这种方法很简单,就是在所有列中使用正的上.下padding和负的上.下margin,并在所有列外面加上一个容器,并设置overflow:hiden把溢出背景切掉. html代码 <div id="wrap"> <div id="left"> <p> left</p> <p> left</p> <p> left</p>

DIV布局-高度不同DIV，自动换行并对齐

最近弄了一个动态添加div框,每个div框内容有多有少,要支持div高度自适应,还要添加的div自动追加,并且换行还要保持每行对齐. 刚开始的效果: 要改啊,搞不定,问了UI高手,终于给出了完美解决方案: 效果: 因为要支持每个div可删除,删除后,后面的div自动补齐,所以用table不显示(除非想自虐的人可以试下) 最终就是css修改了一下就搞定了,术业专攻啊... <html> <head> <style> .test_area{ width:100%; back

未知宽高元素如何在一个div中上下左右居中对齐

<body> <div id="div1"> <img src="../06图片懒加载/img/img1.png"/> </div></body> 那么,img元素如何在div中居中对齐呢? 第一种方法:第一步:在img标签后面添加一个span元素 <body> <div id="div1"> <img src="../06图片懒加载/img/im

C++ 格式化地输出乘法口诀表，要求每列左对齐

原代码如下: #include <iostream> using namespace std; int main() { int i = 0, j = 0; for (i = 1; i < 10; i++) { for (j = 1; j <= i; j++) { cout << i << "*" << j << "="; cout.width(4); //设置结果宽度为4 cout.setf(

一个DIV三列布局100%高度自适应的好例子（国外）

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang=&

div 两列式布局

<html> <head> <style> #div1{ background-color:green; height:200px; float:left; width:200px; } #div2{ background-color:silver; height:200px; } </style> </head> <body>