css 网页当中的竖线-HTML教程-爱易网页

css 网页当中的竖线

日期：2014-05-16　浏览次数：20852 次

css 网页中间的竖线

（此图片原地址如下：http://demo.dtcms.net/news/5.html）

我是想请教：
中间这条竖线应该怎么写，如果我以左边的div为主，写成：border-right:1px solid;，这样的话，一旦左边的内容高度比右边的低时，那么竖线就无法到底，提供的页面也可以看出此问题，但是以右边的div为主时，依然会有这个问题

请问怎么解决这个问题？
html应该怎么写？
------解决方案--------------------
你可以采用等高布局，无论左右内容如何改变，两部分的高度始终保持一致，你可以尝试给左侧或者右侧添加文本内容，来查看效果

<!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=utf-8" />

<style>

.box{width:900px;margin:auto; border-top:solid 2px #ccc; border-right:solid 2px #ccc; overflow:hidden;}

.cf:after{display:block;content:'';clear:both;}

.cf{zoom:1;}

.box div{float:left;}

.left{width:598px; border-right:solid 2px #ccc;padding-bottom:2000px;margin-bottom:-2000px; background:#FF0;}

.right{width:300px;padding-bottom:2000px;margin-bottom:-2000px; background:#FCF;}

</style>

<title>无标题文档</title>

</head>



<body>

<div class="box cf">

	<div class="left">

    	在工信部透露TDD-LTE频谱规划后，知情人士向新浪科技透露称中国联通可能获发的4G牌照和频谱资源，据悉，中国联通将获得的4G牌照为FDD-LTE，而使用的4G频率将可与3G共用，这样将有利于联通3G向4G平滑过渡，对联通对4G非常有利。

        在工信部透露TDD-LTE频谱规划后，知情人士向新浪科技透露称中国联通可能获发的4G牌照和频谱资源，据悉，中国联通将获得的4G牌照为FDD-LTE，而使用的4G频率将可与3G共用，这样将有利于联通3G向4G平滑过渡，对联通对4G非常在工信部透露TDD-LTE频谱规划后，知情人士向新浪科技透露称中国联通可能获发的4G牌照和频谱资源，据悉，中国联通将获得的4G牌照为FDD-LTE，而使用的4G频率将可与3G共用，这样将有利于联通3G向4G平滑过渡，对联通对4G非常在工信部透露TDD-LTE频谱规划后，知情人士向新浪科技透露称中国联通可能获发的4G牌照和频谱资源，据悉，中国联通将获得的4G牌照为FDD-LTE，而使用的4G频率将可与3G共用，这样将有利于联通3G向4G平滑过渡，对联通对4G非常

    </div>

    <div class="right"></div>

</div>

</body>

</html>

------解决方案--------------------
你还可以通过脚本控制来实现类似的效果

<!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=utf-8" />

<style>

.box{width:900px;margin:auto; border:solid 2px #ccc;}

.cf:after{display:block;content:'';clear:both;}

.cf{zoom:1;}

.box div{float:left;}

.left{width:598px; border-right:solid 2px #ccc; background:#FF0;}

.right{width:300px;background:#FCF;}

</style>

<title>无标题文档</title>

<script>

window.onload=function()

{

	var oLeft=document.getElementById('left');

	var oRight=document.getElementById('right');

	oLeft.style.height=oRight.style.height=Math.max(oLeft.offsetHeight,oRight.offsetHeight)+'px';

}

</script>

</head>



<body>

<div class="box cf">

	<div class="left" id='left'>

    	在工信部透露TDD-LTE频谱规划后，知情人士向新浪科技透露称中国联通可能获发的4G牌照和频谱资源，据悉，中国联通将获得的4G牌照为FDD-LTE，而使用的4G频率将可与3G共用，这样将有利于联通3G向4G平滑过渡，对联通对4G非常有利。

        在工信部透露TDD-LTE频谱规划后，知情人士向新浪科技透露称中国联通可能获发的4G牌照和频谱资源，据悉，中国联通将获得的4G牌照为FDD-LTE，而使用的4G频率将可与3G共用，这样将有利于联通3G向4G平滑过渡，对联通对4G非常在工信部透露TDD-LTE频谱规划后，知情人士向新浪科技透露称中国联通可能获发的4G牌照和频谱资源，据悉，中国联通将获得的4G牌照为FDD-LTE，而使用的4G频率将可与3G共用，这样将有利于联通3G向4G平滑过渡，对联通对4G非常

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

css 网页当中的竖线

相关资料更多>

推荐阅读更多>