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

这是我的页面<divid="a">//内容</div><divid="b">//内容</div>在页面中b显示在a的下面如何让b显示在a的右边?... 这是我的页面
<div id="a">
//内容
</div>

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

在页面中b显示在a的下面 如何让b显示在a的右边?
展开
 我来答
别吃纳豆
推荐于2017-10-14 · 超过17用户采纳过TA的回答
知道答主
回答量:59
采纳率:0%
帮助的人:33.6万
展开全部

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

纯洁的小树
2015-10-11 · TA获得超过3386个赞
知道大有可为答主
回答量:2536
采纳率:71%
帮助的人:463万
展开全部
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
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
嗨皮你我他
2013-01-17 · TA获得超过681个赞
知道小有建树答主
回答量:250
采纳率:0%
帮助的人:101万
展开全部
<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的下面。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
wgyy1987
2013-01-17 · 超过21用户采纳过TA的回答
知道答主
回答量:151
采纳率:0%
帮助的人:71.3万
展开全部
<div id="a" style="float:left"></div>

<div id="b" style="float:left"></div>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
梦中有门
推荐于2017-10-03 · TA获得超过385个赞
知道小有建树答主
回答量:655
采纳率:60%
帮助的人:231万
展开全部
<style>
#a {float:left;}
</style>

或者改一行代码
<div style="float:left;" id="a">
//内容
</div>
<div id="b">
//内容
</div>
本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(3)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式