如何在一个div里做两个浮动窗口?

发布网友发布时间：2024-10-04 06:02

我来回答

共1个回答

热心网友时间：2024-11-23 20:12

问题分析：

HTML中的浮动窗口，可以使用CSS的定位方式完成，同时使用这种方式来完成这个功能也是一种较为简单的方式，只需要有HTML以及CSS的知识就可以完成了。

举例如下：

在以下示例中，将演示页面左右两侧分别放置一个高度为500像素，宽度为200像素的浮动窗口。示例中使用的定位方式为：固定定位（fixed），所有它们将永远的跟随页面进行滚动。

HTML代码：

<div id="left">
<p>我是左侧浮动窗口的内容</p>
</div>
<div id="right">
<p>我是右侧浮动窗口的内容</p>
</div>

CSS代码：

body{
    /*
     * 为body标签设置背景仅仅是为了演示效果。
     * 与浮动窗口本身无关。
     */
    background-color: #ccc;
}
#left, #right{
    position: fixed;
    top: 100px;
    width: 200px;
    height: 500px;
    line-height: 500px;
    text-align: center;
    border: 1px solid #000;
    background-color: #FFF;
}
#left{
    left: 50px;
}
#right{
    right: 50px;
}

页面初始化效果：