Question

如何用css控制div在页面中的位置

这是我的页面
<div id="a">
//内容
</div>

<div id="b">
//内容
</div>

在页面中b显示在a的下面 如何让b显示在a的右边？

Answer 1

CSS中的position property一共有四种：

1. postion: static

2. postion: relative

3. position: fixed

4. position: absolute

如果设置div为static postion, div的位置将不受top,right,left,button等变量的影响，而是按照正常的页面布局进行排版。例：

    div.static {
        position: static;
        border: 3px solid #8AC007;
    }

如果设置div为relative position, 其变量的值将会使div的位置相对其正常(default)位置进行移动。例：

    div.relative {
        position: relative;
        left: 30px;
        border: 3px solid #8AC007;
    }

如果设置div为fixed position, div将会被固定在窗口的固定位置。也就是说无论你如何上下移动页面, div在屏幕上显示的位置始终不变。

    div.fixed {
        position: fixed;
        bottom: 0;
        right: 0;
        width: 300px;
        border: 3px solid #8AC007;
    }

如果设置div为absolute position, div将会相对于其最近的position ancestor定位。absolute position是可以随页面移动而移动在屏幕上的位置的。

    div.absolute {
        position: absolute;
        top: 80px;
        right: 0;
        width: 200px;
        height: 100px;
        border: 3px solid #8AC007;
    }

以上CSS你可以放到自己的网页应用里试一下，区别就很明显了。

参考资料：http://www.w3schools.com/css/css_positioning.asp

Answer 2

1、设置div的位置可以通过float和position属性进行修改。
2、float是设置块元素的浮动，可以设置向左或向右浮动，即left和right。更多值急使用方法参考：http://www.w3school.com.cn/cssref/pr_class_float.asp。
3、position属相需要relactive和absolute结合使用。参考：http://www.w3school.com.cn/cssref/pr_class_position.asp

Answer 3

<div id="a" style="width:400px; float:left;">
//内容
</div>

<div id="b" style="width:400px; float:right;">
//内容
</div>

这里说明下，要让b在a的右边，必须给这两个div设置个适合的宽度，如果没设置宽度的话，div默认的宽度是100%，所以如果没有设置宽度b就会在a的下面。

Answer 4

<div id="a" style="float:left"></div>

<div id="b" style="float:left"></div>

Answer 5

<style>
#a {float:left;}
</style>

或者改一行代码
<div style="float:left;" id="a">
//内容
</div>
<div id="b">
//内容
</div>