如何实现父div的边框，并且左右div的间隔边框与父div的边框一样高！

xingxingxiangrong 2008-11-12 09:25:08 


<html>

<head>

 <style>

   body{

    font-family:Arial,Helvetica,sans-serif;

    font-size:12px;

    margin:0px;

    padding:0px;       

}

#container{

    position:relative;    

    width:780px;

    left:50%;

    margin-left:-390px;   

    background-color:#ffffff;

}

#test{

    width:782px;

    margin:0px;padding:0px;     

    border-left:1px solid #aaaaaa;

    border-right:1px solid #aaaaaa;

    border-bottom:1px solid #aaaaaa;  

}

#left_1{

    float:left;

    width:200px;

    margin:0px;padding:0px;          

}

#right_1{

    float:left; 

    width:577px;

    margin:0px;padding:0px;border-left:1px solid #aaaaaa; 

}



 </style> 

</head>

<body>

<div id="container"> 

<div id="test">

  <div id="left_1">

    <h4 ><span>公告信息</span></h4>

    <ul>

      <li>  新闻中心</li>

      <li>  新闻中心</li>

      <li>  新闻中心</li>

      <li>  新闻中心</li> 

    </ul>

  </div>

  <div id="right_1">

     <h4 ><span>  新闻中心</span></h4>

     <p>  新闻中心  新闻中心  </p>

  </div></div>

</div> 

</body>

</html>

火狐怎么实现公告信息的左边框还有新闻中心右边框，另外公告信息与新闻中心的间隔边框怎么弄与左右边框一齐高。
...全文
403 10 打赏 收藏 转发到动态 举报
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
Cyril_Tam 2008-11-12
  • 打赏
  • 举报
 回复
红色为修改地方

<html>
<head>
<style>
body{
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
margin:0px;
padding:0px;
}
#container{
position:relative;
width:780px;
left:50%;
margin-left:-390px;
background-color:#ffffff;
}
#test{
float:left;
width:782px;
margin:0px;
padding:0px;
border-left:1px solid #aaaaaa;
border-right:1px solid #aaaaaa;
border-bottom:1px solid #aaaaaa;
}
#left_1{
float:left;
width:200px;
margin:0px;
padding:0px;
border-right: 1px solid #aaaaaa;
}
#right_1{
float:left;
width:577px;
margin:0px;padding:0px;
/*border-left:1px solid #aaaaaa; */
}

</style>
</head>
<body>
<div id="container">
<div id="test">
<div id="left_1">
<h4 ><span>公告信息</span></h4>
<ul>
<li>  新闻中心</li>
<li>  新闻中心</li>
<li>  新闻中心</li>
<li>  新闻中心</li>
</ul>
</div>
<div id="right_1">
<h4 ><span>  新闻中心</span></h4>
<p>  新闻中心  新闻中心  </p>
</div>
</div>
</div>
</body>
</html>
Tommy_Tommy 2008-11-12
  • 打赏
  • 举报
 回复 


   body{

    font-family:Arial,Helvetica,sans-serif;

    font-size:12px;

    margin:0px;

    padding:0px;       

}

#container{

    position:relative;    

    width:780px;

    left:50%;

    margin-left:-390px;   

    background-color:#ffffff;

}

#test{

    width:782px;

    margin:0px;padding:0px;     

    border-left:1px solid #aaaaaa;

    border-right:1px solid #aaaaaa;

    border-bottom:1px solid #aaaaaa;  

}

#left_1{

    float:left;

    width:200px;

    margin:0px;

	padding:0px;          

}

#right_1{

    float:left; 

    width:577px;

    margin:0px;padding:0px;border-left:1px solid #aaaaaa; 

	height:120;

}

#right_1 ul

{

width:auto;

}



#right_1 li

{

margin-left:5px;

float:left;

list-style-type:none;

}






<div id="container"> 

<div id="test">

  <div id="left_1">

    <h4 ><span>公告信息</span></h4>

    <ul>

      <li>  新闻中心</li>

      <li>  新闻中心</li>

      <li>  新闻中心</li>

      <li>  新闻中心</li> 

    </ul>

  </div>

  <div id="right_1">

     <h4 ><span>新闻中心</span></h4>

     <ul>

	 <li>新闻中心</li>

	 <li>新闻中心</li>

	 </ul>

  </div></div>

</div>
xingxingxiangrong 2008-11-12
  • 打赏
  • 举报
 回复
[Quote=引用 3 楼 cgisir 的回复:]
中间那条竖线有三种方法
一、给最高的一边设置边线，公告信息栏目高的话就给他设置右边线，新闻中心高的话就给他设置左边线，总之以最高的为准。
二、给外容器也就是id="test"的DIV一个背景，背景宽度以左侧或右侧宽度为准，就是一条线，经Y轴平铺。
三、用JS判断哪个高，然后设置他们的高度为最高值。

test边线清理下浮动就行了
<div style="clear:both"> </div>

HTML code<html>
<head>
<style>
body{
…
[/Quote]

<div style="clear:both"> </div> 这句话是什么意思了
中间边框不确定哪个高，哪个低，怎么用js判断了

4楼方法我试过了，不行的
mute_solo 2008-11-12
  • 打赏
  • 举报
 回复
我来接分：请看代码：



<html>

<head>

 <style>

   body{

    font-family:Arial,Helvetica,sans-serif;

    font-size:12px;

    margin:0px;

    padding:0px;       

}

#container{

    position:relative;    

    width:780px;

    left:50%;

    margin-left:-390px;   

    background-color:#ffffff;

	 height: 100px;

}

#test{

    width:782px;

    margin:0px;padding:0px;

	 padding-left:20px;     

    border-left:1px solid #aaaaaa;

    border-right:1px solid #aaaaaa;

    border-bottom:1px solid #aaaaaa;  

	 height:100%;

}

#left_1{

    float:left;

    width:200px;

    margin:0px;padding:0px; 

	 border-left:1px solid #aaaaaa;          

}

#right_1{

    float:left; 

    width:300px;

	 height:100%;

    margin:0px;padding:0px;border-left:1px solid #aaaaaa; 

	 border-right:1px solid #aaaaaa; 

}



 </style> 

</head>

<body>

<div id="container"> 

<div id="test">

  <div id="left_1">

    <h4 ><span>公告信息</span></h4>

    <ul>

      <li>  新闻中心</li>

      <li>  新闻中心</li>

      <li>  新闻中心</li>

      <li>  新闻中心</li> 

    </ul>

  </div>

  <div id="right_1">

     <h4 ><span>  新闻中心</span></h4>

     <p>  新闻中心  新闻中心  </p>

  </div></div>

</div> 

</body>

</html>


cgisir 2008-11-12
  • 打赏
  • 举报
 回复
中间那条竖线有三种方法
一、给最高的一边设置边线，公告信息栏目高的话就给他设置右边线，新闻中心高的话就给他设置左边线，总之以最高的为准。
二、给外容器也就是id="test"的DIV一个背景，背景宽度以左侧或右侧宽度为准，就是一条线，经Y轴平铺。
三、用JS判断哪个高，然后设置他们的高度为最高值。

test边线清理下浮动就行了
<div style="clear:both"></div>
<html>

<head>

 <style>

   body{

    font-family:Arial,Helvetica,sans-serif;

    font-size:12px;

    margin:0px;

    padding:0px;       

}

#container{

    position:relative;    

    width:780px;

    left:50%;

    margin-left:-390px;   

    background-color:#ffffff;

}

#test{

    width:782px;

    margin:0px;padding:0px;     

    border-left:1px solid #aaaaaa;

    border-right:1px solid #aaaaaa;

    border-bottom:1px solid #aaaaaa;  

}

#left_1{

    float:left;

    width:200px;

    margin:0px;padding:0px;          

}

#right_1{

    float:left; 

    width:577px;

    margin:0px;padding:0px;border-left:1px solid #aaaaaa; 

}



 </style> 

</head>

<body>

<div id="container"> 

<div id="test">

  <div id="left_1">

    <h4 ><span>公告信息</span></h4>

    <ul>

      <li>  新闻中心</li>

      <li>  新闻中心</li>

      <li>  新闻中心</li>

      <li>  新闻中心</li> 

    </ul>

  </div>

  <div id="right_1">

     <h4 ><span>  新闻中心</span></h4>

     <p>  新闻中心  新闻中心  </p>

  </div>

	<div style="clear:both"></div>

  </div>

</div> 

</body>

</html>
xingxingxiangrong 2008-11-12
  • 打赏
  • 举报
 回复
关键是
有时候左边div高右边div低，有时候左边div低右边div高

那该如何协调了

最好给我代码看看，谢谢了
bhbhxy 2008-11-12
  • 打赏
  • 举报
 回复
设置border-left-color和border-right-color
还有container和其余div的高度设置一下，弄成等高的就行了
Tommy_Tommy 2008-11-12
  • 打赏
  • 举报
 回复 


<style>

   body{

    font-family:Arial,Helvetica,sans-serif;

    font-size:12px;

    margin:0px;

    padding:0px;       

}

#container{

    position:relative;    

    width:780px;

    left:50%;

    margin-left:-390px;   

    background-color:#ffffff;

}

#test{

    width:782px;

    margin:0px;padding:0px;     

    border-left:1px solid #aaaaaa;

    border-right:1px solid #aaaaaa;

    border-bottom:1px solid #aaaaaa;  

	height:120px;

}

#left_1{

    float:left;

    width:200px;

    margin:0px;

    padding:0px;          

}

#right_1{

    float:left; 

    width:577px;

    margin:0px;padding:0px;

	border-left:1px solid #aaaaaa; 

    height:120;

}

#right_1 ul

{

width:auto;

}



#right_1 li

{

margin-left:5px;

float:left;

list-style-type:none;

}

</style>





<div id="container"> 

<div id="test">

  <div id="left_1">

    <h4 ><span>公告信息</span></h4>

    <ul>

      <li>  新闻中心</li>

      <li>  新闻中心</li>

      <li>  新闻中心</li>

      <li>  新闻中心</li> 

    </ul>

  </div>

  <div id="right_1">

     <h4 ><span>新闻中心</span></h4>

     <ul>

     <li>新闻中心</li>

     <li>新闻中心</li>

     </ul>

  </div></div>

</div>
xingxingxiangrong 2008-11-12
  • 打赏
  • 举报
 回复
先揭帖吧！
xingxingxiangrong 2008-11-12
  • 打赏
  • 举报
 回复
Tommy_Tommy 按你给方法试了，火狐下还是没有左右边框
Cyril_Tam 中间那个边框还是确定不了，因为左右内容不知道哪个高哪个低


看来只有左div有右边框右div有左边框这样就好了，不过还是谢谢你们的帮助
DIV布局和CSS精讲
本课程是带领大家学习Pc端网页、app、小程序的布局以及样式添加，学完本课程，大家可以对任意网页实现布局，思路清新。 课程简介： 1，html5编辑器的介绍和使用 2，块标签 3，内联标签 4，超链接和锚点 5，12种选择...
html设置div边框的写法,设置div边框
设置装备摆设div边框border技俩对div设置边框CSS5给大家引见三种法子。首先找到边框CSS单词：border(边框border根本教程)一、直接div标签内设置边框1、div边框实例代码设置装备摆设div边框厚度3px，实线血色边框2、...
html的div双线边框,设置div边框
设置装备摆设div边框border名堂对div设置装备摆设边框CSS5给各人引见三种法子。首先找到边框CSS单词：border(边框border根抵教程)一、直接div标签内设置装备摆设边框1、div边框实例代码配置div边框厚度3px，实线血色...
html 给div设置边框颜色代码,div边框颜色设置
div边框颜色 css设置div边框颜色使用css对div边框设置颜色是常见CSS样式设置。对div边框颜色设置说需要css单词为border。去了解相关教程：《CSS边框》教程一、div四条边的边框颜色设置如果不设置边框宽度粗细，只...
div html隐藏边框,div 边框原来有这么多种设置方法
这里给DIV加一个边框方式教程，实现div边框花色。通过CSS border花式属性完成加边框。下列是各类给DIV加差距边框实例和技能花样教程、html代码。一、div加四边加边框1、用到css单词与值border:1pxsolid#F00设置对象...
CSS

61,112

社区成员

60,730

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

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

+ 用AI写文章