请教一下CSS中的float:浮动属性的具体运用的问题 - ASP技术论坛

| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛 |

编程论坛 → WEB开发 → 『 ASP技术论坛』 → 请教一下CSS中的float:浮动属性的具体运用的问题

我的收件箱(0)

欢迎加入我们，一同切磋技术

共有 381 人关注过本帖

标题：请教一下CSS中的float:浮动属性的具体运用的问题

只看楼主加入收藏

yiyaozjk

等　级：论坛游民
帖　子：231
专家分：30
注　册：2010-3-10
结帖率：51.67%

楼主

已结贴√ 问题点数：20 回复次数：6

请教一下CSS中的float:浮动属性的具体运用的问题

初学CSS,自己写了一代码:不能达到效果,

代码如下:
<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
<html xmlns="http://www.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS样式演示</title>
</head>
<style  type="text/css">

</style>
<body  bgcolor="#ffffff" >

<p> <h1 style="float: left ; ">想垂直方向居中<br><br></h1> </p>
<p>第2行显示内容
<br>
第3行显示内容
<br >
第4行显示内容</p>
</body>
</html>
现在显示的效果不能满意

图片附件: 游客没有浏览图片的权限，请登录或注册

请高手指点一下,如何再让字体最大的一段居于右边3行字的垂直方向的中间,(我也不想将几段文字就放在单元格TD中去控制)最好是直接在我的代码中修改一下,新手, 谢谢!!

搜索更多相关主题的帖子: html　PUBLIC　content　background　head　

2012-02-21 18:27

yms123

等　级：版主
威　望：209
帖　子：12488
专家分：19042
注　册：2004-7-17

第 2 楼

得分:0

程序代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.">
<html xmlns="http://www.">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">

 #MainDiv

 {
     width:715px;
     height:65px;
     background-color:#FF0;

 }

 #div1

 {
     width:357px;
     height:65px;
     float:left;/*让div水平平铺的关键*/
     line-height:65px;/*单行文本垂直居中就是让这个值(行高)等于高度*/
     text-align:center;/*文本水平居中*/
     font-family:"宋体";
     font-size:35px;
     color:#000;

 }

 #div2

 {
     width:357px;
     height:65px;
     font-size:22px;
     line-height:20px;
     font-family:"宋体";
     color:#000;
     text-align:left;
     float:left;/*每个水平平铺div必须加*/

 }
</style>
</head>
<body>
<div id="MainDiv">
   <div id="div1">
   垂直居中的文字
   </div>
   <div id="div2">
     第1行的内容<br />
     第2行的内容<br />
     第3行的内容<br/>
   </div>
</div>
</body>
</html>

以上代码在IE9下测试正常

2012-02-21 19:12

yiyaozjk

等　级：论坛游民
帖　子：231
专家分：30
注　册：2010-3-10

第 3 楼

得分:0

以下是引用yms123在2012-2-21 19:12:23的发言：

#MainDiv
{
     width:715px;
     height:65px;
     background-color:#FF0;
}
#div1
{
     width:357px;
     height:65px;
     float:left;/*让div水平平铺的关键*/
     line-height:65px;/*单行文本垂直居中就是让这个值(行高)等于高度*/
     text-align:center;/*文本水平居中*/
     font-family:"宋体";
     font-size:35px;
     color:#000;
}
#div2
{
     width:357px;
     height:65px;
     font-size:22px;
     line-height:20px;
     font-family:"宋体";
     color:#000;
     text-align:left;
     float:left;/*每个水平平铺div必须加*/
}


   垂直居中的文字

     第1行的内容

     第2行的内容

     第3行的内容



以上代码在IE9下测试正常

2012-02-21 21:49

yiyaozjk

等　级：论坛游民
帖　子：231
专家分：30
注　册：2010-3-10

第 4 楼

得分:0

版主是利用了层DIV，但我很想知道我的错在哪？？从中吸取经验，谢谢

2012-02-21 21:51

yms123

等　级：版主
威　望：209
帖　子：12488
专家分：19042
注　册：2004-7-17

第 5 楼

得分:0

float: left ;
这个只是实现左方向水平平铺，float主要是平铺作用left就是以左边为基准平铺，right就是右边为基准平铺。
这个属性不管垂直居中，所以只设置这个属性是不会垂直居中的，
垂直居中只跟高度有关系，要么像我写的那个代码行高等于高度这样会垂直居中，或者更笨的办法margin-top等于高度的一半这种笨办法

2012-02-22 09:04

yiyaozjk

等　级：论坛游民
帖　子：231
专家分：30
注　册：2010-3-10

第 6 楼

得分:0

line-height:65px;/*单行文本垂直居中就是让这个值(行高)等于高度*/
然后:
垂直居中只跟高度有关系，要么像我写的那个代码行高等于高度这样会垂直居中
这一句话有点不太理解...那为什么有些标签还要有vertical-align:middle 这个属性呢?而在这里又不用去设置这个属性(我设置过,也没有用,所以也不太很明白)

请版主再详解一下...谢谢!!

2012-02-22 14:17

yms123

等　级：版主
威　望：209
帖　子：12488
专家分：19042
注　册：2004-7-17

第 7 楼

得分:20

vertical-align:middle
这个好像在多行或图片上管用，不过IE下这个属性没有行高管用。

2012-02-23 16:22

快速回复：请教一下CSS中的float:浮动属性的具体运用的问题