三个div,一个左浮动，一个右浮动，另外一个不浮动引发的样式问题

最新推荐文章于 2023-01-28 12:10:26 发布
原创 最新推荐文章于 2023-01-28 12:10:26 发布 · 1w 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了解决浮动元素不占据页面空间的问题的方法。通过设置display:inline-block属性，可以使左右浮动的div正常排列在同一行。

在设计页面时，我们经常遇到这种情况，一个div设置了左浮动，另一个div设置了右浮动，而因为浮动起来后，这两个div就不占据页面空间了，所以后面的div,就会显示在这两个div的下面，就像这种情况
这里写图片描述这可不是我们想要的！解决办法就是给 黄色的div添加一个属性divYellow:display:inline-block;这样他们都变成了行内块级元素了，效果就变成了我们想要的了
这里写图片描述

蓝色清晨_
关注
一个老外弄的Clearing floats(清除浮动的方法)
10-30
在这个例子中，两个`<div>`元素分别向左和右浮动。`clear:both` 被应用于外部的`<div>`，以确保内部的浮动元素不会影响到后续的内容。 **优点：** - 实现简单，易于理解。 - 在大多数现代浏览器中表现一致。 **...
js 创建一个浮动div的代码
10-29
标题和描述中提到的知识点涉及JavaScript编程，特别是如何使用JavaScript代码来创建一个可以在网页上浮动的div元素，并且具备一些交互功能，如点击事件以及条件判断。 1. **创建浮动div**: JavaScript可以动态地...
关于三栏布局中浮动布局div块的先后顺序
wpbfj的博客
03-15 1682
常用的三栏布局中，用的较多的浮动布局，会因为div块的先后顺序而产生不同的效果。 这种情况下，一般左右两栏div需要在中间栏之前。这样，才能让左右两个边栏浮动到它们应该的位置上，以此来使得中栏能够进入中间的空间，并自适应布局。若是浏览器在一个或者两个边栏div之前发现中栏，那么中栏会先占据一侧或者两侧位置，这样浮动的部分就会跑到中栏的下面。 如下： 上理前端分队
三个div快 第一个左浮动 第二个不浮动 第三个右浮动 为什么右浮动上不去？
Byte_Dance的博客
03-06 5713
因为第三个div块是写在第二个div块下面的，而且第二个div块的位置正常，没有浮动，它会一直占住它本来的位置。所以第三个div块不管怎么浮动都会被第二个div块挡下去。就好像假如你的第一个向左浮动的div是写在第二个div下面，它也是不可能占到第二个蓝色的位置上去的。左边的元素左浮动,当浮动出中间内容区域范围之后,打印就看不到左边的了,可以直接用固定定位fixed给他定位住, 右边的只能使用左f...
盒子模型&浮动
qq_39249908的博客
06-29 642
盒子模型 盒子模型的组成：content（内容）、border（边框）、padding（内边距）、margin（外边框）。 对边框border的设置：边框宽度、边框样式、边框颜色。 边框宽度：border-width value以像素为单位。 边框样式：border-style value有none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset。常用的有solid、dotted、dashed三种。 边框颜色：border-color
html怎么用div浮动分块,css 的浮动的一种使用，特别是div的左右分栏
weixin_33119123的博客
06-19 810
css真是很奇妙，今天就遇到了一个奇怪的div的使用问题，就是都在左边弄好后，弄右边时，右边无论相对定位怎么float还有margin-right都不能解决问题，后来参照别人的网站，就发现使用div父容器下，再分左右，然后两个都float：left就彻底解决了。这里牵涉到一个很有代表的问题，就是先做右分栏，再上下分栏，这里刚开始我是左右，然后下边又一个元素，这个时候，就不区分父子，不区分左右了，记...
左浮动和右浮动
自信的尘埃 www.gocpplua.com
01-18 1万+
左浮动和右浮动
浮动导致的边框缺失
weixin_56773850的博客
01-28 228
因为设置了浮动导致列表的边框缺失，只有上边框。overflow使得内容可以撑开容器。
div三栏布局左中右通过float浮动来设置
09-25
`float`属性在CSS中主要用于元素的定位，它可以使得元素向左或向右移动，直到其边缘接触到包含框或另一个浮动元素的边缘。当元素浮动后，它会脱离当前的正常文档流，不影响其他非浮动元素的位置，除非这些元素也设置...
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
10-28
在网页设计中，实现一个元素在浏览器中相对于页面主体宽度的左右浮动位置是一个常见的需求。这通常涉及到对元素的CSS属性进行动态设置，使之能够在不同屏幕尺寸和分辨率下都能保持恰当的布局。在给定的文件中，描述...
DIV+CSS垂直居中一个浮动元素
09-25
为了解决这个问题，我们可以采取一种技巧，即在按钮元素外部包裹一个`span`元素，并将`span`元素设置为浮动，同时保持它的高度与外层`div`相同。同时，我们还需要设置`span`元素的行高（`line-height`）与高度相等，...
css实现左右布局，左侧div固定不变，右侧div宽度自适应
热门推荐
yinkaihui的博客
11-15 1万+
1.如果不考虑浏览器的兼容问题的话，可以使用css3的新增属性 calc()  ;calc是calculate的简写，汉语为计算的意思。 .left{ width: 200px; float: left; height: 200px; background: pink; } .right{ float: left; width: calc(100% - 200px);
html折叠div悬浮,html – 收缩包装/缩小以适应一个div以在css中回填浮动的div
weixin_42516104的博客
05-30 256
http://jsfiddle.net/zEcn3/12/我试图获得一个div内容，调整大小适合一行的div数量。因此，当窗口大于所有项目div的组合时，该示例工作正常，因此它们全部在一行中，但是当窗口调整大小时，其中一个项目将回填到下一行，内容div的宽度为100 ％而不是收缩包装。我想要这样做的原因是，我可以将内容与内容上的菜单栏对齐，缩小到组合回流内容的大小。HTML：Hello.Hello...
css关于子级盒子浮动与不浮动的覆盖关系
m0_62641005的博客
02-20 1453
问题：我们知道浮动经常使用在父级为标准流的盒子里面添加子级元素，需要注意的是，如果子级元素中存在一个浮动的话，那么其它的子级盒子都需要浮动，否则就会发生覆盖等问题了。 下面根据CSS和大家演示下 <body> <div> <div class="one">粉色</div> <div class="two">绿色</div> <div class="three">黄
div实现页面划分为左，中，右三栏
qq_37555524的博客
09-17 8659
1、实现方法 2、注意的问题 1、实现方法 利用css分栏，一个整体的div id为wrap ，包含三个div，分别代表左栏（wrap-1）、中栏(wrap-m)、右栏（wrap-r） 通过float...
CSS非浮动实现一个元素在流的右侧显示
qq_32753509的博客
03-22 814
html： <div class="_right_block"></div> css： ._right_block{ margin-left:auto; }
当两个div一个固定，一个不固定，但不换行的解决办法
柒柒捌捌。
08-14 636
方法1： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> *{margin:0;padding:0;} .left {float:left;width:200px;background-c
解决div+css布局左右浮动问题
lanziseningmeng的专栏
07-06 2409
Tags:div  css  布局  浮动  代码  左右  宽度  右侧  适应  右侧    在我们进行div+css网页布局时，难免会出现css布局左右出现浮动的问题，如有时右边的这一列会浮动在左边的下方或者右下方、左右布局不对等的问题。那么如何处理好div+css布局左右浮动问题呢？   先看以下代码片段： css代码： #left{ float:left;wid
CSS 浮动的理解
专精一道 则万法通
01-31 3871
以下都是我碰到过的疑惑，在此一一验证： 1、div1不浮动，div2左浮动，发生什么情况？ 说明一个情况：浮动只是脱离其所在行，但仍然是在该行浮动。该行是普通流决定的。如上图，div1是普通流占据第一行，那么div2占据第二行，其只能在第二行浮动。 2、div1左浮动，div2不浮动，顺序是（div1，div2），发生什么情况？可以这样分析：div1在原本行中浮动起来， 说明：di
两个div左浮动右浮动不在一行
05-25
如果两个div左浮动右浮动不在一行，可能是因为它们的宽度加起来超过了它们所在容器的宽度。此时可以尝试以下解决方案： 1. 容器使用 `overflow: hidden` 属性来清除浮动，这样可以让两个div在同一行显示。 2. 给两...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值