div内如何快速布局元素位置

[crydear]

一个div内包含的多种不同内容，多个不同属性元素，比如p段落、span包裹的内容、超链接、图片、按钮等等，怎样才能快速布局达到你想要的某个元素快速到达你想要的位置呢

[qq_40730245]

引用 1 楼 qq_25768813的回复:

你所说的想要某个元素快速到达想要的位置是什么意思呢? 比如说:是像photoshop那样,任意的把一个图层移动到画布的任意位置么? 如果是这个需求的话. 一般是把div的position属性设置成relative. 然后把所有子元素的position属性设置成absolute. 接下来只需要设置子元素的left top bottom和right属性就行了....至于为什么会这样,可以参考一下w3c相关教程

<style>
    div {
        border: 1px solid red;
        position: relative;
        height: 30em;
    }

    span {
        border: 1px solid black;
        position: absolute;
        left: 10;
        top: 10;        /* 修改他们的值就可以任意移动了*/
    }
</style>
<div>
    <span>到底移动</span>
</div>

它那个left、Top这些是相当于一个在相对范围里的定位吗？？

[冉娃娃]

你所说的想要某个元素快速到达想要的位置是什么意思呢? 比如说:是像photoshop那样,任意的把一个图层移动到画布的任意位置么? 如果是这个需求的话. 一般是把div的position属性设置成relative. 然后把所有子元素的position属性设置成absolute. 接下来只需要设置子元素的left top bottom和right属性就行了....至于为什么会这样,可以参考一下w3c相关教程

<style>
    div {
        border: 1px solid red;
        position: relative;
        height: 30em;
    }

    span {
        border: 1px solid black;
        position: absolute;
        left: 10;
        top: 10;        /* 修改他们的值就可以任意移动了*/
    }
</style>
<div>
    <span>到底移动</span>
</div>

[yCodeM]

标签嵌套 div p{ } 就像这样写的样式是div标签里的p标签

[前端-珊珊]

快速实现你想要的布局的话用定位可以解决，有些用浮动也可以解决。 定位的话就用父元素position:relative;每一个子元素的position:absolute；用 top left right bottom 进行布局。 还有一个就是用float。左浮动右浮动。

[csdnwjj]

恩，当一个div设置relative 时，其他里面的p标签或者其他的标签的位置都是相对div这个大容器来设定的，比如设置p标签left为100px那么100px是相对于div的100px

[看着是个昵称]

定位实现起来确实不错，但是不建议这样做，因为定位太多，页面看着没有问题，源码看起来就很不好了

[qq_40891462]

上面的说的差不多了 子绝父相用起来很爽的 定位可以想定哪儿定哪儿

[蕤sunny]

引用 1 楼 qq_25768813 的回复:

你所说的想要某个元素快速到达想要的位置是什么意思呢? 比如说:是像photoshop那样,任意的把一个图层移动到画布的任意位置么? 如果是这个需求的话. 一般是把div的position属性设置成relative. 然后把所有子元素的position属性设置成absolute. 接下来只需要设置子元素的left top bottom和right属性就行了....至于为什么会这样,可以参考一下w3c相关教程

<style>
    div {
        border: 1px solid red;
        position: relative;
        height: 30em;
    }

    span {
        border: 1px solid black;
        position: absolute;
        left: 10;
        top: 10;        /* 修改他们的值就可以任意移动了*/
    }
</style>
<div>
    <span>到底移动</span>
</div>

1楼说的有道理，外面的大框架用relative相对定位，里面的小元素用absolute绝对定位，但是这种说法也不是绝对的，还是需要按照具体情况做处理。编写css代码时，可以利用sass或者less工具，可以嵌套设置，会清晰明了一些

[#麻辣小龙虾#]

页面布局，主要理解盒子模型。主要理解行级元素和块级元素的区别、position:absolute、relative、fixed的使用，及float的区别~！

[Jjb125]

学习学习~~

[daydayUp.]

大概方法 1.子觉父相，子元素，posa.父元素,posr 2.float:left 3.display:inline-block,存在兼容问题，移动端的话就不担心了 推荐你看下,zh.learnlayout.com,很简单的网站，告诉你一些布局方法， 也许你看到一下就懂了