底部对齐的简单有关问题，抢分啦
日期：2014-05-17 浏览次数：20823 次
底部对齐的简单问题，抢分啦
<div>
<div id= 'id1 '> 顶部对齐的内容 </div>
<div id= 'id2 '> 底部对齐的内容 </div>
</div>
----------------------------------
代码和结构如上
麻烦各位给点 CSS 代码。
要求， id1 靠顶部，id2 靠底部
------解决方案--------------------
用table吧：
valign = top/bottom
------解决方案--------------------
俺觉得没戏，
因为 Div 没有 valign 或类似属性，不能控制上下位置，div 只能控制左右位置。
只能用 table ，因为 td 上可以用 valign 。
<TABLE cellspacing= "0 " cellpadding= "0 " style= "height: 300px; width: 400px; border: 1px solid red; ">
<TR>
<TD style= "height: 50%; width: 400px; border: 1px solid green; vertical-align: top; "> 顶部对齐的内容 </TD>
</TR>
<TR>
<TD style= "height: 50%; width: 400px; border: 1px solid blue; vertical-align: bottom; "> 底部对齐的内容 </TD>
</TR>
</TABLE>
------解决方案--------------------
我就是来抢分的,顺带问一句,信誉值 怎么涨上去的?
------解决方案--------------------
line-height吧
------解决方案--------------------
----------------html部分---------------
<html>
<head>
<title> </title>
<link rel= "stylesheet " href= "he.css " type= "text/css ">
</head>
<body>
<div id= "top "> 顶部对齐的文字 </div>
<div id= "bottom "> 底部对齐的文字 </div>
</body>
</html>
--------------css部分-----------------
#top
{
top:0;
left:0;
width:400px;
height:150px;
border:1px solid #ff0000;
}
#bottom
{
width:400px;
height:150px;
padding:150px 0 0 0;
border:1px solid #ff0000;
}
<div>
<div id= 'id1 '> 顶部对齐的内容 </div>
<div id= 'id2 '> 底部对齐的内容 </div>
</div>
----------------------------------
代码和结构如上
麻烦各位给点 CSS 代码。
要求， id1 靠顶部，id2 靠底部
------解决方案--------------------
用table吧：
valign = top/bottom
------解决方案--------------------
俺觉得没戏，
因为 Div 没有 valign 或类似属性，不能控制上下位置，div 只能控制左右位置。
只能用 table ，因为 td 上可以用 valign 。
<TABLE cellspacing= "0 " cellpadding= "0 " style= "height: 300px; width: 400px; border: 1px solid red; ">
<TR>
<TD style= "height: 50%; width: 400px; border: 1px solid green; vertical-align: top; "> 顶部对齐的内容 </TD>
</TR>
<TR>
<TD style= "height: 50%; width: 400px; border: 1px solid blue; vertical-align: bottom; "> 底部对齐的内容 </TD>
</TR>
</TABLE>
------解决方案--------------------
我就是来抢分的,顺带问一句,信誉值 怎么涨上去的?
------解决方案--------------------
line-height吧
------解决方案--------------------
----------------html部分---------------
<html>
<head>
<title> </title>
<link rel= "stylesheet " href= "he.css " type= "text/css ">
</head>
<body>
<div id= "top "> 顶部对齐的文字 </div>
<div id= "bottom "> 底部对齐的文字 </div>
</body>
</html>
--------------css部分-----------------
#top
{
top:0;
left:0;
width:400px;
height:150px;
border:1px solid #ff0000;
}
#bottom
{
width:400px;
height:150px;
padding:150px 0 0 0;
border:1px solid #ff0000;
}
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
