div浮动在页面上（div浮动或定位）

本文目录一览：

• 1、在html里图片和文字同时在同一个div里怎么让图片浮动到图片的上面
• 2、div里面可以设置浮动吗?
• 3、div浮动到img上边。

在html里图片和文字同时在同一个div里怎么让图片浮动到图片的上面

在同一个div里，先书写一段代码，如下图所示，在这个代码中给dive设置宽度和高度，这时为了让文字有一个具体的范围。找到background，如下图示，在background的后面添加上图片作为这个的背景图案。之后在background后面加上url（），为了连接图片，在url里面写的就是背景图片的路径。

将文字浮在图片上我们加个div把图片和文字包在一起，并且加上img-group和img-tip这两个class，便于后面的处理。我们要让文字浮在图片上面，需要加上定位。看文字浮在了图片的底部。display： inline-block；与定位无关，只是使整个.img-group长宽与图片适应。

使用css中的flaot属性就可以了，首先打开Dreamweaver，创建html文件：然后先给页面设置背景颜色，创建段落两个段落，段落上面设置2张图片的float属性，分别让它们左右浮动，值为left和right，最后打开浏览器：打开浏览器后即可看到效果，两张图片分别浮动在文本的左右两边，文字则是围绕在图片周围.。

你可以这么分解： 一个图片+文字说明是一行 这一行里分2列 一列是图片 一列是文字 全部靠左流动。文字说明又分为2行 。

首先打开软件，并创建一个新的html文件。创建新文件后，设置页面背景颜色。在新文件中创建段落一，或者选择一个段落。再引入图片并设置图片大小，这里就可以设置图片浮动至段落的左边。创建段落二，或者选择一个新的段落。6，再次引入图片并设置图片大小，同时设置图片浮动至段落的右边。

div里面可以设置浮动吗?

1、需要浮动的话，只需要在样式上的position设置fixed即可。比如：div style=position：fixed； z-index：1；/div这样写就浮动了，然后只需要用top、bottom、left、right来定位就行了如果需要飘来飘去的浮动，需要配合js来完成，js可以去牛图库上找，里面有很多插件，改下样式就可以使用了。

2、HTML中的浮动窗口，可以使用CSS的定位方式完成，同时使用这种方式来完成这个功能也是一种较为简单的方式，只需要有HTML以及CSS的知识就可以完成了。举例如下：在以下示例中，将演示页面左右两侧分别放置一个高度为500像素，宽度为200像素的浮动窗口。

3、在样式里面加入浮动属性就可以做到，是需要敲代抄码的。如果敲代码，DW软件系统默认给弄成相对与绝对定位position，但这种方式不利于后面内容的排版。你可以给左边的图片加入左浮动，就像这样： img{float： left；}，然后再给右边的文字加入左浮动，这样：div{float： left；} 。

4、同样，注意宽度问题.三是，你加入的内容一定要放在p里面，一般不建议将整个层右浮动，如果你是往这两个p里面加图片，你可以用li来布局，然后将其一个设置为左浮动一个设置为右浮动.如果你加的全是文字，用什么标签都行了。如何制作简易DIV悬浮框？使用Dreamweaver软件，打开一个已经编辑完成的html页面。

5、把两个div放在一个父div里面，然后进行浮动即可。

div浮动到img上边。

1、在同一个div里，先书写一段代码，如下图所示，在这个代码中给dive设置宽度和高度，这时为了让文字有一个具体的范围。找到background，如下图示，在background的后面添加上图片作为这个的背景图案。之后在background后面加上url（），为了连接图片，在url里面写的就是背景图片的路径。

2、在图片上面加个div层，让它浮于图片上方步骤如下：创建一个描述中的div图层。在上一个图层的上方新建一个div。为了方便看出来图片上方div的位置，设置其属性之后如下。这样在图片上面加个div层，让它浮于图片上方的问题就解决了。

3、通过{width：50%；height：auto；}实现图片高度跟随宽度比例调整。但是这个百分比是根据父级的高度来计算的，根本不是根据元素自身的宽度，那么就做不到Div的宽高达成一定的比例。直接指定div的宽高+zoom来实现自适应div{width：50px；heigth：50px；zoom：1；}这样能达到初步的等宽高div。

4、HTML图片和文字是并列显示的。如下： 将文字浮在图片上我们加个div把图片和文字包在一起，并且加上img-group和img-tip这两个class，便于后面的处理。我们要让文字浮在图片上面，需要加上定位。看文字浮在了图片的底部。display： inline-block；与定位无关，只是使整个.img-group长宽与图片适应。

5、如果只给img浮动 在浏览器显示： 因为img是浮动的，但是div不是浮动的，img脱离了标准流，因此它是浮在上面的，但是div不是浮动的，因此他遵循标准流，由于img不占用标准流的位置，那么后面的div就会自动补位，浮动上去。

6、新建html文件，例如：index.html。在index.html中的script标签，输入js代码：div style=background： url（smallpng）； height： 60px； span style=position： absolute；right： 10px；123/span /div 浏览器运行index.html页面，此时文字成功浮动到了图片右上方了。