CSS教程:关于文字溢出问题的研究

2008-10-17 19:28:25 佚名

4.也加上浮动效果；
运行代码框

<!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 name="generator" content="WebJX editor, www.jb51.net" />

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

<title>Untitled</title>

<style>

*{

font-family:"宋体";

}

.test{

display:block;

float: left;

margin-right:2px;

}

.main{width:200px;

}

</style>

</head>

<body>

<div class="main">

<a href="#" class="test">再谈猪的问题</a>

<a href="#" class="test">再谈猪的问题</a>

<a href="#" class="test">再谈猪的问题</a>

<a href="#" class="test">两猪两猪两猪</a>

<a href="#" style="color:#f00" class="test">↑上面就是多出的猪两个</a>

<a href="#" class="test">再谈猪的问题</a>

</div>

</body>

</html>

[Ctrl A 全部选择提示：你可先修改部分代码，再按运行]
5.想想如果将外面的main中的宽度设置去掉后，会发现最后个层并未连续浮动到第三个层后面，而是另起新行排列；
运行代码框

<!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 name="generator" content="WebJX editor, www.jb51.net" />

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

<title>Untitled</title>

<style>

*{

font-family:"宋体";

}

.test{

display:block;

float: left;

margin-right:2px;

}

</style>

</head>

<body>

<div >

<a href="#" class="test">再谈猪的问题</a>

<a href="#" class="test">再谈猪的问题</a>

<a href="#" class="test">再谈猪的问题</a>

<a href="#" class="test">两猪两猪两猪</a>

<a href="#" style="color:#f00">↑上面就是多出的猪两个</a>

<a href="#" class="test">再谈猪的问题</a>

</div>

</body>

</html>

[Ctrl A 全部选择提示：你可先修改部分代码，再按运行]
6.将main中的宽度设定到一定数值时也可以是正常的；
运行代码框

<!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 name="generator" content="WebJX editor, www.jb51.net" />

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

<title>Untitled</title>

<style>

*{

font-family:"宋体";

}

.test{

display:block;

float: left;

margin-right:2px;

}

.main{width:500px;

}

</style>

</head>

<body>

<div class="main">

<a href="#" class="test">再谈猪的问题</a>

<a href="#" class="test">再谈猪的问题</a>

<a href="#" class="test">再谈猪的问题</a>

<a href="#" class="test">两猪两猪两猪</a>

<a href="#" style="color:#f00">↑上面就是多出的猪两个</a>

<a href="#" class="test">再谈猪的问题</a>

</div>

</body>

</html>

[Ctrl A 全部选择提示：你可先修改部分代码，再按运行]