css问题怎么让这两个矩形div居底部。

fanyp2006 2010-10-26 08:26:15

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>浮动</title>
<style type="text/css">
#postBar {
position:fixed;
left:0px;
bottom:0;
_position:absolute;
_top:expression(document.documentElement.clientHeight + document.documentElement.scrollTop - this.offsetHeight);
}
</style>
</head>
<body><table> <tr><td valign="bottom">

<div style="float:left; width:65px" >
0.00
</div>

<div style="float:left; width:65px" >
0.00
</div>

</td></tr>

<tr><td valign="bottom">

<div style='float:left;background-color:Blue; width:50px; height:100px;' ></div><div style="float:left; width:15px; height:100px; " ></div>

<div style='float:left;background-color:Blue; width:50px; height:200px;' ></div><div style="float:left; width:15px; height:200px; " ></div>

</td></tr>
<tr><td>

<div style="float:left; width:50px;text-align:center;">语文</div><div style="float:left; width:15px; height:10px; " ></div>

<div style="float:left; width:50px;text-align:center;">数学</div><div style="float:left; width:15px; height:10px; " ></div>

</td></tr>

</table>

</body>
</html>

...全文

764 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

keke453042926 2010-10-26

打赏
举报

如果你这两个层的长度不固定的话建议你每个长方条你放置两个层，一个作为背景，颜色就设置为你要显示的颜色，高度就设置成固定的高度，然后上面再弄一个层，跟下面的层样式一样，背景设成白色，这样你可以通过控制这个白色的层的高度来达到显示的效果！！！

whb147 2010-10-26

打赏
举报

div的居中很麻烦的

仙儿 2010-10-26

打赏
举报

LZ 用table吧 DIV 还要做样式 TABLE来得直接些

phil999 2010-10-26

打赏
举报

如果float，第一个div要加 margin-top:100px，但是这个值楼主可能是需要动态计算，楼主可以用jquery动态设置 margin-top

孟子E章 2010-10-26

打赏
举报

既然使用表格，就直接td就能完成
float:left无法进行定位的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

  <title>浮动</title>

  <style type="text/css">



}

</style>

</head>

<body>

  <table cellspacing="10" cellpadding="0">

    <tr style="text-align: center">

      <td valign="bottom" style="width: 65px">

        0.00

      </td>

      <td style="width: 65px">

        0.00

      </td>

    </tr>

    <tr style="text-align: center">

      <td  style="vertical-align: top; background-color: Blue; width: 50px;

        height: 100px;">

        <div style="width:100%;height:50px;background:#FFF"> </div>

      </td>

      <td valign="bottom" style="vertical-align: bottom; background-color: Blue; width: 50px;

        height: 100px;">

      </td>

    </tr>

    <tr style="text-align: center">

      <td>

        语文

      </td>

      <td>

        数学

      </td>

    </tr>

  </table>

</body>

</html>