如何实现两个div层的左右边界对齐

lj6868686868 2008-10-11 07:49:58

有两个div层;
<style type="text/css">
.nav{width:1000px;
cursor: hand;
margin-bottom:0;
}
.nav li{
margin-bottom:0;
float:left;
background-image: url(image/1.gif);
color: #FFFFFF;
background-attachment: scroll;
background-repeat: repeat-x;
background-position: left top;
font-size: 16px;}
.logg{float:left;
width:1000px;
margin-top:0;
margin-right:30px;
}
.logg li{
margin-top:0;
float:left;
font-size: 12px;
color: #FFFFFF;
background-color: #999999;

}
</style >
<div align="left" class="nav">
<ul>
<li>|<a href="index.php"><font color="#FFFFFF">首页</font></a>|</li>
<li>文章|</li>
<li>博客|</li>
<li>下载|</li>
<li>圈子|</li>
<li>视频|</li>
<li>flash|</li>
<li>图片|</li>
<li>论坛|</li>
<li>游戏|</li>
<li>顶客|</li>
<li>留言|</li>
<li>搜索|</li>
</ul>
</div>
<div class="logg"><ul><li>用户名<input name="user" type="text" class="wenben">密码
<input name="pass" type="password" class="mima">忘记密码？
验证码 <img src ="yanzheng.php" onclick="this.src='yanzheng.php'"> <font color="#CC6600"><-单击更换</font>
<input name="yanzhengma" type="text" class="yanzen">
<input name="tijiao" type="submit" value="登录" class="gaibian">
<a href="reg.php"><font color="#0000FF">注册</font></a> 网站地图 Rss订阅 <?php echo $us;?>
</li>
</ul></div>
左边用float:left;已对齐；右边：第二个层由于含php代码，用户没登陆时显示固定的字符串，可以用调整字符串宽度的办法实现右对齐。但当用户登陆后，将显示“用户名+已登陆”
用户名由3-10字符组成，无法用上述办法，应怎么办？

...全文

1865 11 打赏收藏转发到动态举报

写回复

用AI写文章

11 条回复

切换为时间正序

请发表友善的回复…

发表回复

greasshea 2009-01-18

打赏
举报

前面的发的在Firefox里显示时，高度长了两个像素：
JS改为如下，达到完美效果

<script type="text/javascript">

if(isFirefox=navigator.userAgent.indexOf("Firefox")>0) 

document.getElementById("Nms_r").style.height=document.getElementById("Nms_l").scrollHeight-2+"px";

if(isFirefox=navigator.userAgent.indexOf("MSIE")>0) 

document.getElementById("Nms_r").style.height=document.getElementById("Nms_l").scrollHeight+"px";

</script>

greasshea 2009-01-18

打赏
举报



<!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">

<!--

#left {

background-color:#0000CC;float:left;width:100px;}

#right {

background-color:#000000;float:right;width:200px;}

#contain {width:300px;height:400px;clear:both;}



-->

</style>

</head>

<body>

<div id="contain">

<div id="left"> <br/ ><br/ ><br/ ><br/ ><br/ > </div>   

<div id="right"><br/ ><br/ ><br/ ><br/ ><br/ ><br/ ><br/ >     

</div> 

</div>

<script type="text/javascript">

document.getElementById("left").style.height=document.getElementById("right").scrollHeight+"px"

</script>

</body>

</html>

用一个JS可以搞定，在IE,firefox里通过验证！

Cyril_Tam 2008-10-13

打赏
举报

加上红色标记的内容便可实现右对齐



<style type="text/css"> 

.nav{width:1000px; 

cursor: hand; 

margin-bottom:0; 

} 

.nav li{ 

margin-bottom:0; 

float:left; 

background-image: url(image/1.gif); 

color: #CCCCCC; 

background-attachment: scroll; 

background-repeat: repeat-x; 

background-position: left top; 

font-size: 16px;} 

.logg{float:left; 

width:1000px; 

margin-top:0; 

margin-right:30px; 

} 

.logg li{ 

margin-top:0; 

float:left; 

font-size: 12px; 

color: #FFFFFF; 

background-color: #999999; 





} 

</style> 

<div align="left" class="nav"> 

	<div style="float:right; margin-right:30px; ">     <ul> 

        <li>| <a href="index.php"> <font color="#FFFFFF">首页 </font> </a>| </li> 

      <li>文章| </li> 

      <li>博客| </li> 

      <li>下载| </li> 

      <li>圈子| </li> 

      <li>视频| </li> 

      <li>flash| </li> 

      <li>图片| </li> 

      <li>论坛| </li> 

      <li>游戏| </li> 

      <li>顶客| </li> 

      <li>留言| </li> 

      <li>搜索| </li> 

    </ul> 

	</div>

  </div> 

<div class="logg"> <ul> <li>用户名 <input name="user" type="text" class="wenben">密码 

        <input name="pass" type="password"  class="mima">忘记密码？ 

        验证码 <img  src ="yanzheng.php" onclick="this.src='yanzheng.php'"> <font color="#CC6600"> <-单击更换 </font> 

        <input name="yanzhengma" type="text" class="yanzen"> 

        <input name="tijiao" type="submit"  value="登录"  class="gaibian"> 

        <a href="reg.php"> <font color="#0000FF">注册 </font> </a> 网站地图 Rss订阅  <?php echo  $us;?> 

    </li> 

    </ul> </div>

lj6868686868 2008-10-13

打赏
举报

上面的方法试过了，不行
我用调整logg.li的width=952px解决了
不管怎样，经大家一点拨，我的思路变的清晰了，在此谢谢大家!

cc123456 2008-10-12

打赏
举报

用overflow-x : hidden ;
裁掉一点，你不介意吧。呵呵

lupanlupan 2008-10-12

打赏
举报

lj6868686868 2008-10-12

打赏
举报

不好意思，我的意思表达不正确，耽误了大家很多时间。
应该是这样的;
层nav和层logg是上下排列的两个层，这两个层的左边是对齐的，我问的是如何使这两层的右边部分对齐？

tiyuzhongxin789 2008-10-12

打赏
举报

lj6868686868 2008-10-11

打赏
举报

是层的左右对齐

一把编程的菜刀 2008-10-11

打赏
举报

意思表达不清楚

是文字的对齐还是层的左右对齐

mrwang2000 2008-10-11

打赏
举报

再帮你顶一下

【个人意见，仅供参考】

没太读懂这个问题，我对你的“右对齐”需求理解为第二个div的右边界紧靠浏览器的右边，并且文字也靠右对齐。
如：

<div style="background:green;width:200px;float:left">左边</div>

<div style="background:red;text-align:right">右边</div>

则只需要把 .logg样式的 float:left 属性去掉即可





.logg li{ 

margin-top:0; 

/*float:left;去掉 */

font-size: 12px; 

color: #FFFFFF; 

background-color: #999999; 

}

div靠下篇小div盒子靠下居于大div盒子底边，靠下的小div盒子与大盒子底边对齐无论大div盒子高度多高，小div盒子都居于大div盒子下面与大div底边对齐紧靠紧贴。一般这种不确定的布局要求，通常我们会使用css绝对定位...

这里设置了DIV块的边界为5px，当有上下两个DIV块时，边界是重合的，按大的来，所以这里上下两个DIV块的距离是5px（只取其中大的边界值，此处全局设定都是5px）如不想全局设置DIV块之间的边界，可在各个DIV块之间进行...

每个td都有一个div .tdcont,它就像是该td中所有内容的包装器.在.tdcont中,我有两组div .alwaystop和.below-at.at1at2at3bat1bat2bat3我遇到的问题是alwaystop应该与单元格的顶部边界对齐,而under-at应该在...

关于每行N列的这种布局，存在一个两端对齐的问题，因为每一列都会存在一个margin-left或者margin-right，导致最后一个超出父元素的边界。通过一番努力，终于解决了这个遗留很久的问题，废话不多说，先看做完之后的...

我们经常会碰到要超出长度的文字字符换了，这个问题一般是出现在英文或全数字情况下，下面我来介绍div 文字自动换行并换行后对齐一些解决办法。div 文字自动换行方法一，代码如下复制代码...

CSS

61,112

社区成员

60,730

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章