Home  >  Article  >  Web Front-end  >  两个并列div高度相同的问题_html/css_WEB-ITnose

两个并列div高度相同的问题_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-21 09:43:431309browse

css div 撑大  CSS div 相邻的一起撑大

<div class="user_content"><ul><li >    <div class="cer_one">名称</div>    <div class="cer_two" id="namediv"><s:property value="user.userName"/></div>    <div class="cer_one">简称</div>    <div class="cer_two" id="chgdiv"><s:property value="user.shortName"/></div></li><li >    <div class="cer_one">年龄</div>    <div class="cer_two"><s:property value="user.age"/></div>    <div class="cer_one">学号</div>    <div class="cer_two" id="chgdiv"><s:property value="user.iden"/></div></li><li>......</li></ul></div


.user_content li{border-bottom : 1px #ccc solid;border-left : 1px #ccc solid;border-right : 1px #ccc solid;}.cer_one{ width:121px; text-align:right; margin:0px; padding-left:20px; line-height:34px;}.cer_two{ width:241px; text-align:left; margin:0px; padding-left:6px;line-height:34px;border-left: 1px #ccc solid;}


简单点就是这样 现在的问题是
在名称中它的值(就是id=namediv)如果长度过长的时候 那这个div就被撑高(因为长度设死了) 本来是表格一样的样式 就成了 简称那个地方的div左边框没有namediv的长只有一半
所以怎样做到简称那个div随旁边namediv撑大也撑大 然后就设置了左边框就和表格的表框一样


不知道我的表述有没有问题
请高手指定 

回复讨论(解决方案)

display:table-cell

   ul{padding:0; margin:0;display:table;}   ul li{ display:table-row;border-style:solid;border-color:#ccc;border-width:0 1px 1px 1px;}   ul li:first-child{border-top-width:1px;}   ul li div{ display:table-cell; line-height:34px}

这不是C#代码吧

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn