CSS-2个div在一行 之后清除浮动

最新推荐文章于 2022-10-25 14:49:08 发布
最新推荐文章于 2022-10-25 14:49:08 发布
阅读量150 收藏
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63701007/article/details/124183562
版权
本文探讨了如何使用CSS使div_1和div_2并排显示的两种方法：将它们设置为inline-block或使用float:left。当使用float属性时，可能会引发div_3上移的问题。通过将div_1和div_2置于一个父容器中，并应用overflow:hidden清除浮动，可以避免这种问题。这种方法确保了布局的稳定性。
摘要由CSDN通过智能技术生成

html css 如下

要注意的点

1.让div_1 和div_2 在一行的方法是有2种。1是变成inline-block，第2种是这两个div都float:left.

2.问题是float:left 之后，div_1和div_2都在一行了，如果下面有个div_3,那么这个div_3会跑上去和div_1,div_2在一行，所以百度查到 将div_1和div_2 用一个父盒子包起来，对父盒子清除浮动，使用 overflow:hidden 那么得到的效果如下

m0_63701007
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html css 3 div并排,CSS-并排对齐两个div
weixin_35657099的博客
06-16 1762
CSS-并排对齐两个div这个问题已经在这里有了答案：并排对齐元素 3个答案我有一个小问题。 我正在尝试使用CSS并排对齐两个div，但是，我希望将中心div在页面中水平居中放置，我通过使用以下方法实现了这一点：#page-wrap { margin 0 auto; }很好 我想将第二个div放置在中心页面换行的左侧，但是尽管...
CSS进阶一（CSS+DIV的页面布局---浮动与定位）
qq_44872688的博客
10-15 2356
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码
清空div和使div在同一行-------发现更大问题 jquery对象与dom对象
菜鸟腾飞
11-21 289
当你想用js把div内容清空,有两个选择 第一 dom对象 document.getElementById("div_food").innerHTML="";第二 jquery对象 $("#div_food").html("");引出了二者的转化问题 jQuery对象转成DOM对象： 两种转换方式将一个jQuery对象转换成DOM对象：[index]和.get(index); (
清除浮动的五种方法
weixin_50582284的博客
10-07 277
一、给浮动元素的祖先元素设置高度 设置前 设置祖先div高度后 二、在两个中间新建一个div设置清除浮动，设置div高度在两个div中间独占一行。 三、在第二个div上设置clear：both清除浮动。 四、在第一个祖先div设置overflow：hidden； 五、用伪对象法 ...
html5浮动div关闭,div浮动之后排在一行，在把浮动去掉，把div用display设置成inline-block之后就不能排在一行了。...
weixin_39655049的博客
06-27 267
去的浮动设置成行级块元素就不能正常布局了。求解浮动设置的布局源码*{margin:0; padding:0; }.wrapper {width:980px; margin:20px auto 0; border:1px solid #ccc; }.header {height:74px; background:#A94E38; text-align:center;line-height:74px;...
css 兄弟选择器 后代选择器 并级选择器
qq_45715615的博客
03-19 726
这些选择器的优先级都为0，优先级最低。 ~ 普通兄弟选择器  匹配所有的兄弟 选择器 <第一个选择器> ~ <第二个选择器> 匹配 目标元素位于匹配第一个选择器的元素之后，且匹配第二个选择器 + 相邻兄弟选择器  匹配相邻的下一个兄弟 选择器 <第一个选择器> + <第二个选择器> 匹配 目标元素紧跟匹配第一个选择器的元素，且匹配第二个选择器 *通配符选择器 * 0 , 并集选择器 创建由逗..
【CSS】css 获取从第n个元素开始，之后的所有元素 :nth-of-type(n)与:nth-child(n)
余浩的博客
05-03 9160
:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素 html代码： <div id="box"> <div>111</div> <div>222</div> <div>333</div> <div>444</div> </div> css代码： 获取box中，除了第一个之外的其他的div #box div:nth-o
让多个div在同一行显示的样式及html代码
09-25
要让多个div在同一行显示，关键在于对CSS的`float`属性的正确应用。通过为每个div元素设置相同的宽度和高度，并且适当地使用浮动（float），可以实现div元素在同一行内水平排列的效果。在HTML结构中，父容器需要有...
通过浮动+定位实现两个div在同一行
09-25
在Web开发中，将两个或者更多的div元素并排放置在同一行是一个非常常见的布局需求。为达到这个目的，开发者们通常会采用各种CSS样式技巧，而浮动（float）和定位（position）是其中较为常用的两种方法。下面将详细...
两个div在同一行且不换行的两种方法
09-25
在网页布局设计中，将两个`div`元素放置在同一行并避免它们自动换行是一项常见的需求。这通常涉及到CSS（层叠样式表）中的布局技术。以下是对标题和描述中所述知识点的详细解释： ### 方法一：使用浮动（Float） *...
css 获取从第n个开始之后的所有元素
09-22
主要介绍了css 获取从第n个开始之后的所有元素 ,需要的朋友可以参考下
css 获取从第n个开始，之后的所有元素
weixin_34259159的博客
11-20 2097
<div id="box"> <div></div> <div>等待获取</div> <div>等待获取</div> <div>等待获取</div> </div> 现要获取box中，除了第一个之外的其他的div...
关于让div放在一行的问题，不使用浮动
qinsangdilvzhi的博客
06-13 2543
实习第一天，导师让我写个页面，按照往常的习惯，让几个div排列在一行就使用了float:left，方便是方便。但是导师说尽量不要使用浮动，让我去思考一下怎么不用浮动让块级元素放置一行。 于是查到了除了使用浮动还有一种方法，就是把子元素都设置为display:inline-block，这样也能完美实现，但是有个缺点有间隙问题。 间隙为4像素，这个问题产生的原因是换行引起的，因为我们写标签时通常会在标签结束符后顺手打个回车，而回车会产生回车符，回车符相当于空白符，通常情况下，多个连续的空白符会合并成一个空白符，
CSS选择除前两个和最后两个之外的所有子元素
H_carrot的博客
10-25 2024
【代码】CSS选择除前两个和最后两个之外的所有子元素。
css用浮动的方法让div在同一行
suandfei的博客
08-11 2889
浮动：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。 如果在页面中输入了3个div 标签，因为div是块级元素，所以这3个div各占一行，但是你为第一个div设置了float:right; 浮动是第一个div脱离就正常的文档流，所以第一个div的位置空间 也就空了出来，下面两个div...
html两个div浮动后下一个div怎么换行的问题
热门推荐
小黄鸭编程法
11-12 3万+
刚开始学习网页前端，不懂得问题挺多，总在网上查找相关知识点，但是东西一旦多了就特别难记全了，今天又查东西突然发现别人都是查完以后把东西写一遍文章记下来方便自己也方便后来的新人所以写了这篇稿子，当然大多数都还是从网上跟一些前辈学的，算不上原创，只能说是总结一下自己要用的和前辈留下的一些知识，方便把这些知识为我所用。 以下内容如有冒犯哪位前辈或者原创，还请多多包涵，也可以联系我删除，绝对尊重原...
div清除浮动
得已
02-09 1650
style="clear:both" 清除上两个层的浮动，也就是说以下的层就继续垂直排列了
html在一行内横向排列并排同行同时显示两个多个div盒子的方法(CSS浮动清除float-clear/inline)/办法
逆流瞅瞅的专栏
04-22 2万+
01/23/2014, Posted in  移动 Comments: No comments 最近在做一个div css切割，昨晚发现了长期以来一直无记录下来的问题！关于兼容IE跟FF的float属性。趁现在还清醒赶紧记下笔记先： 一、并排在一行的两个div样式有这种情况：ie或者ff下对于子div设置float左的时候，如果另外的子div没有设置float左的 话，两个
第一行div清除浮动没效果
最新发布
04-29
2. 使用伪元素清除浮动： ```css .clearfix::after { content: ""; display: block; clear: both; } ``` 这种方法不会增加无意义的代码，但是需要在CSS中定义样式。 3. 使用overflow属性清除浮动： ```css ....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值