关于浮动的练习

最新推荐文章于 2023-11-07 20:58:13 发布

转载最新推荐文章于 2023-11-07 20:58:13 发布 · 801 阅读

本文介绍了一个简单的两列布局实现方法，使用HTML与CSS技术，详细解释了如何通过浮动元素创建固定宽度的左右两栏布局，并提供了两种解决方案。

编程练习

小伙伴们，根据所学知识，实现如下图所示的简单两列布局，整个页面宽度为960px，背景颜色为#CFF。左侧盒子宽度为740px，背景颜色为#C9F，右侧盒子宽度为210px，背景颜色为#FCF。左侧和右侧盒子的高度均为300px。

效果图:

温馨提示:完成任务后，请验证是否与实践描述效果一致，如一致，恭喜您，你已经掌握此技能，否则，请重复学习此节内容。

任务

一、在右侧代码的body标签中添加一个div，设置其class属性为mainBox。

二、在mainBox中添加两个div，其class属性分别为leftBox和rightBox。

三、在右侧代码的</head>之前，分别定义类选择器mainBox、leftBox、rightBox，并按照题目要求定义其CSS样式。

提示:
  1．根据任务要求设置相关CSS样式
  2. leftBox和rightBox需要嵌套在mainBox中

注意：leftBox和rightBox设置浮动之后脱离了普通的文档流，不再占用原来文档中的位置，因此无法把父div撑开。

解决的方法：

①可以给父div也设置高度为300px，使页面中的leftBox和rightBox看起来“好像”还在原来的位置；
②定义一个类选择器，并设置clear:both；清除浮动，同时为了解决IE6中div有高度的问题可以增加属性height:0;overflow:hidden;
其他解决方法可以参照上面的评测题

代码参考：

<!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">
/*在此定义相应的类选择器，并根据要求设置相关CSS属性*/
.mainBox{
     width:960px;
     background-color:#CFF;
     height:300px;
}
.leftBox{
    width:740px;
    background-color:#C9F;
    height:300px;
    float:left;
}
.rightBox{
    width:210px;
    background-color:#FCF;
    height:300px;
    float:right;
}
</style>
</head>

<body>
<!--在此添加相应的div标签-->
<div class="mainBox">
    <div class="leftBox"> </div>
    <div class="rightBox"></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=gb2312" />
<title>无标题文档</title>
<style type="text/css">


/*在此定义相应的类选择器，并根据要求设置相关CSS属性*/
.mainBox{
    width:960px;
    background:#cff;
}
.leftBox{
    width:740px;
    height:300px;
    background:#c9f;
    float:left;
}
.rightBox{
    width:210px;
    height:300px;
    background:#fcf;
    float:right;
}
.Box{
    clear:both;
    height:0;
    overflow:hidden;
}


</style>
</head>


<body>




<!--在此添加相应的div标签-->
<div class="mainBox">
    <div class="leftBox"></div>
    <div class="rightBox"></div>
    <div class="Box"></div>
</div>




</body>
</html>