这篇博客介绍了如何使用CSS将两个div元素放置在同一行，并展示了如何通过浮动、清除浮动和使用`overflow:hidden`方法来实现这一效果。博主还分享了学习过程中的经验，包括遇到的问题和解决方案，以及对不同清除浮动方法的优缺点分析。
在界面设计的时候，经常需要将两个div在同一行显示。
但是每次都会忘记怎么做，特此随笔，备忘。
如以下要将“第一个div”和“第二个div”显示在同一行：
只需要对id2和id3增加css样式即可，如下所示：
这样就可以了。很简单吧。
2016.09.20 修改补充
在此随笔发出的几个小时之后，有大神提出了质疑：没有清除浮动，并给我了一个差评。
哈哈哈哈。感谢这位大神的指正。
那下面就清除一下浮动吧。
以下面代码为例进行说明：
(1)
代码(1)的截图为
清除浮动的方法：
1、对父级设置合适的高度：对父级设置合适的高度进行清除浮动，父级内内容的高度为20px+2px=22px，在id1中增加样式height=“22px”即可。
效果图：
缺点：对父级设置合适的高度来清除浮动的这种方法必须要知道父级内容的高度。比较不方便。
2、clear:both清除浮动：在父级元素结束前，增加以下红色代码，清除浮动。
效果图：
3、父级div定义overflow:hidden清除浮动：
id1增加overflow:hidden样式，即可清除父级元素内使用float:left/float:right产生的浮动。
效果图：
以上是清除浮动的三种方法，望大神指教。
参考：http://www.divcss5.com/jiqiao/j406.shtml
如何让两个div在同一行显示?一个float搞定
最近在学习div和css,遇到了一些问题也解决了很多以前以为很难搞定的问题.比如:如何让两个div显示在同一行呢?(不是用table表格,table对SE不太友好)其实,
div+css:两个div并排等高 (table-cell)
两个div并排等高
< ...两个div在同一行，两个div不换行
方法一:
css两个form不换行，两个div并排代码
1.form不换行通过table布局实现
| DIV+CSS布局问题：一个宽度不确定的DIV里面放三个水平对齐的DIV，左右两个DIV宽度固定为150px，中间那个DIV充满剩余的宽度 一个入门的DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度. 说明:代码非真实情况下使用,所以直接简单. 没耐 ... 【css flex】将多个<;div>;放在同一行 使用style里的flex属性 默认情况下,一个div独占一行 使用css选择器给外层div加上以下flex属性,则该div的子div可以在同一行中显示, .runs-paginator-flex-c ... css 让两个div重叠 做网页的时候在div里放了一个别的网页的天气插件,但是点击了会跳到广告页面的,想去网上找个禁止div点击的方法,可是发现没有,用了js的方法好像也没有成功,后来觉得还是用两个层重叠的方法来阻止点击,虽 ... 随机推荐 CSS实现内容超过长度后以省略号显示 样式: {width: 160px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;} 说明: white-space: ... JavaEE：JavaEE技术组成 Java平台版本: JavaSE:Java Platform Standard Edition,标准版,用来开发桌面应用系统: JavaEE:Java Plateform Enterprise Edi ... Dedecms去掉URL中a目录的方法 本文实例讲述了Dedecms去掉URL中a目录的方法.分享给大家,供大家参考.具体分析如下: 使用dedecms的朋友可能会发现自己的URL目录生成是会自动带有一个/A/目录了,那么要如何去掉URL中 ... 动手动脑：Finally Ø当有多个嵌套的try…catch…finally时,要特别注意finally的执行时机. Ø请先阅读 EmbedFinally.java示例,再运行它,观察其输出并进行总结. Ø特别注意: Ø当有多 ... Java中的异常处理 描述: 如果Java中的函数有可能抛出异常,则该异常要么被catch住,要么在声明函数时必须声明该函数体会throws exception. 处理的时候的流程是,当发生异常时,首先结束当前函数后续语句 ... JAVA虚拟机学习笔记(一)Windows10下编译OpenJDK8 转载请注明源地址:http://www.cnblogs.com/lighten/p/5906359.html 1. 编译环境的准备 1.1 JDK源码下载 OpenJDK是JAVA发展史中的一个开源项 ... 记录终端输出的LOG到文件 先要说明为什么要记录终端会话,因为常会遇到这样的情况,终端是有缓存大小限制的,当在终端打印的消息超出缓存范围,它前面的打印消息就自动丢失了,这对于我们调试程序会造成障碍,所以有记录完整终端打印消息的必 ... linux三剑客之sed命令 一.前言 我们都知道,在Linux中一切皆文件,比如配置文件,日志文件,启动文件等等.如果我们相对这些文件进行一些编辑查询等操作时,我们可能会想到一些vi,vim,cat,more等命令.但是这些命令 ... 第四次：渗透练习，xss学习 xss学习 一.学习目的 初步了解xss攻击,不包括(DOM类型) 二.附加说明 1.xss介绍 https://baike.baidu.com/item/XSS%E6%94%BB%E5%87%BB/ ... SQLFullbackup /* ==Scripting Parameters== Source Server Version : SQL Server 2016 (13.0.1601) Source Database Engi ... |
扫一扫
9991