div绝对定位的运用（实现三个div随浏览器变化而变化）

最新推荐文章于 2022-07-12 00:57:00 发布
最新推荐文章于 2022-07-12 00:57:00 发布
阅读量750 收藏 2
点赞数
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46066327/article/details/117524579
版权

实现效果：

三个div块，第一个和最后一个固定不变，中间的随浏览器大小变化而变化。

主要实现步骤：

float属性：

利用float将三个div浮动到同一行，其中因为要将第一个div固定到左边，所以第一个div float：left

同理，第三个固定在右边 float：right

div的width属性：

因为第一，第三个div固定，所以采用width：150px；

第二个div随窗口大小改变，所以采用width：100%

采用绝对定位：

position: absolute;

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0&#
最低0.47元/天 解锁文章
挖掘机绝绝子
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS绝对定位瀑布流布局（随窗口大小自由变动）
05-07
兼容IE6/7/8，火狐，360，Chrome等各大主流浏览器，绝对定位瀑布流布局，随窗口大小自由布局
一个div在浏览器水平居中的实现方法
01-21
一个div在浏览器水平居中的实现方法 第一种方法： CSS Code复制内容到剪贴板 div { margin: 0 auto; width: 960px; }  第二种方法（兼容IE）： CSS Code复制内容到剪贴板 body { text-align: ...
Web_CSS_DIV相对浏览器定位及其关闭；
cyb专栏
03-03 1422
功能：DIV在屏幕中的绝对定位。 hello html,body { width:100%; height:100%; margin:0px; padding:0px; overflow:hidden; //溢出隐藏；解决IE8滚动条问题； } #Main { position:absolute; t
html让div自动居中,让html div元素随浏览器的大小自适应垂直居中
weixin_42355256的博客
06-02 764
表格可以实现td中的元素垂直居中显示，但是前提条件必须定义td的高才可行。但是很多时候会用到元素跟随浏览器的大小垂直居中，如在制作展示官网、活动展示网等等的时候。问题：实现div垂直居中并在缩放浏览器尺寸的时候仍然居中。解决方案：1.浏览器可视区域的高度-元素的高度/2 = 元素距离浏览器可视区域顶部的距离。(bodyHeight – divHeight)/22.浏览器可视区域如果小于元素的高度，...
IE6/IE7下position:absolute;绝对定位偏移、不显示问题 (转)
weixin_34290352的博客
05-20 92
2019独角兽企业重金招聘Python工程师标准>>> ...
关于css中的定位问题
qq_40688398的博客
03-01 427
多层嵌套div：外层加相对定位，次外层加绝对定位，那么最里面的一层会不会跟着次外层div的定位而移动呢?。（position问题） 给定父div相对定位、次子div绝对、子div相对定位。 结果发现子div以次子div为参照物定位。 去掉次div定位。 结果发现子div以父div做定位参照物。 去掉父div定位，给body一个定位。 结果发现子元素跑到了body的右下角。 从上面可以看...
css三种方法实现div在浏览器水平居中
12-13
本文教大家如何实现一个div在浏览器水平居中，下面是三种解决方法，具体内容如下 第一种方法： CSS Code复制内容到剪贴板 div { margin: 0 auto; width: 960px; }  第二种方法（兼容IE）: CSS Code复制...
通过float实现两个div不换行
09-25
`float`有三个可能的值：`left`、`right`和`none`。 1. `float: left;` 当设置`div`的`float`属性为`left`时，元素会尽可能地向左浮动，直到它的左侧碰到包含框或另一个浮动元素。在此示例中，`div#row1`设置了`...
CSS实现DIV居中的三种方法
09-27
本文将详细介绍三种方法来实现`div`的居中对齐，适用于不同场景和需求。 ### 方法一：使用margin自动填充 这种方法适用于当外层`div`（`.div1`）的尺寸已知，并且内层`div`（`.div2`）的尺寸也已知的情况。我们...
js实现DIV的一些简单控制
10-30
在我们的示例代码中，我们首先使用 CSS 来定义三个 DIV 的样式，然后使用 JavaScript 来获取这些 DIV 对象，并对它们进行一些简单的控制。 在 back() 函数中，我们使用 divMoveTo() 函数来移动 DIV 到指定的位置，...
文字图片随浏览器大小而变化
10-18
文字图片随浏览器大小而变化，呵呵……这个一定要分享
解决css中div随窗口大小变化而变化
烟溪彭于晏的博客
07-12 9629
本来还很好看一旦缩放窗口，就成了这样 恶心吐了要。经过查找，给div添加下面css可解决，意思是强制在同一行展示，窗口缩放之后也是一样。这样子就顺眼多了 但是这样又有了一个麻烦，原本两行的内容，现在只能在一行展示，势必会挤压其他div的空间，导致图片又变小了。我们又只能通过强制换行了，如果只能通过强制换行而不是自动换行多多少少肯定还是有问题的。还有一个办法在其父元素加上以下样式，这样就不会因为 white-space：nowrap而影响布局。但是缺点也显而易见的，字体已经越界了。......
div随着浏览器窗口大小变更，改变大小（resize）
热门推荐
xuanlv_haoshao的博客
04-01 4万+
浏览器的放大缩小会导致网页布局变动，jquery的resize()方法，可以根据浏览器的窗口大小的变动，对网页进行操作：以下是div随着浏览器窗口大小变更，改变大小（resize）的案例：html:js效果：resizeDiv的块会根据网页变更，大小也随之改变...
【CSS】Css设置position:absolute div标签不随页面滚动而滚动
dkz97的博客
06-30 1万+
问题原因   最近实习在修bug的时候，遇到一个问题。简单来说html的结构就和下面差不多 <body> <!-- 省略多个外部结构 有overflow:auto--> <div id="下拉框点击按钮"> <div id="下拉框窗口" style="position:absolute; left=xxx; top=xxx"> 当然这只是简单的结构 </div> </div> </bo
div同行显示_三个div同行显示
weixin_29248611的博客
12-23 2168
今天记录的是css布局的一些经验。对于三个div同行显示的问题，在网页的制作中有很多的应用。比如圆角矩形的导航效果。和一些网站的内页等都需要三个div同行显示。例如今天做的这个效果↓↓↓↓↓↓↓↓左右两边都是一张图片，中间是文字或者其他元素。类似这样的效果，基本上都可以归属于三个div同行显示的问题。那么，如何让三个div同行显示呢？方法很简单，就是让三个div 都左浮动，同时设置三个div的长度...
页脚绝对定位时根据屏幕大小自动调整位置
qq_35703552的博客
11-12 1109
应用场景： 在开发时经常遇到提交等操作按钮需要始终国定在页面底部的需求，如果我们采用fix定位会以浏览器窗口的相对位置进行定位，这样宽度会不好控制。如果使用绝对定位，当屏幕尺寸变化时往往样式会产生变化，定位的位置就会出现问题。 解决方案 可以通过动态的获设置对应dom的高度来实现 mounted() { this.$refs['card'].$el.style.height = document.body.clientHeight - 104 + 'px';
div盒子的相对定位（position:relative）和绝对定位（position:absolute）
AMuMuion的博客
08-25 2万+
有一说一，在做搜索框，鼠标触发事件的时候要用到盒子的相对和绝对定位。 在CSS中，position:absolute;当position的值为absolute时，这个盒子就是开启了绝对定位模式。 引用来自W3C的权威解读：https://www.w3school.com.cn/css/css_positioning_absolute.asp（内容如下图） 做个例子： 列出四个盒子，标记不同颜色，不做任何定位操作。 html部分 <div id="main"> <d...
上下Div固定，中间div高度自适应（随浏览器高度变化而变化）
路在路上的博客
10-03 1万+
1.css代码： html,body{ margin:0; padding:0; height:100%; overflow:hidden; } #top{ position:absolute; top:0; left:0; background-color:#05C020; height:50px; width:100%; z-index:100; } #bottom{
请帮我编写一个实现6个div元素，在浏览器中排列成两行，每一行三个div，并且给这六个div设置不同的颜色。
最新发布
07-16
当然可以帮你编写这个代码！以下是一个示例的HTML和CSS代码，可以实现你所描述的布局和不同颜色的div元素： ```html <!DOCTYPE html> <html> <head> <style> .container { display: flex; flex-wrap: wrap; justify-content: center; } .box { width: 100px; height: 100px; margin: 10px; } .color1 { background-color: red; } .color2 { background-color: green; } .color3 { background-color: blue; } .color4 { background-color: yellow; } .color5 { background-color: orange; } .color6 { background-color: purple; } </style> </head> <body> <div class="container"> <div class="box color1"></div> <div class="box color2"></div> <div class="box color3"></div> <div class="box color4"></div> <div class="box color5"></div> <div class="box color6"></div> </div> </body> </html> ``` 在这个示例中，我们使用了CSS的Flexbox布局来实现两行三列的排列。每个div元素都有一个`.box`类，宽度和高度都设置为100px，并且有一个10px的外边距。通过为每个div设置不同的背景颜色类（`.color1`到`.color6`），我们可以实现不同颜色的效果。 你可以将上述代码复制到一个HTML文件中，然后在浏览器中打开该文件，就可以看到效果了。希望这能帮到你！如果还有其他问题，请随时问我。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值