html/css 两个div在同一行
在界面设计的时候,经常需要将两个div在同一行显示。
但是每次都会忘记怎么做,特此随笔,备忘。
如以下要将“第一个div”和“第二个div”显示在同一行:
<div id="id1"> /*外层div*/
<div id="id2" style="width:100px;height:20px;">第一个div</div>
<div id="id3" style="width:100px;height:20px;">第二个div</div>
</div>
只需要对id2和id3增加css样式即可,如下所示:
<div id="id1"> /*外层div*/
<div id="id2" style="width:100px;height:20px;float:left;">第一个div</div>
<div id="id3" style="width:100px;height:20px;float:left;">第二个div</div>
</div>
这样就可以了。很简单吧。
2016.09.20 修改补充
在此随笔发出的几个小时之后,有大神提出了质疑:没有清除浮动,并给我了一个差评。
哈哈哈哈。感谢这位大神的指正。
那下面就清除一下浮动吧。
以下面代码为例进行说明:
(1)
<div id="id1" style="width:300px;border:1px solid black">
<div id="id2" style="width:100px;height:20px;float:left;border:1px solid red">第一个div</div>
<div id="id3" style="width:100px;height:20px;float:left;border:1px solid blue">第二个div</div>
</div>
代码(1)的截图为
清除浮动的方法:
1、对父级设置合适的高度:对父级设置合适的高度进行清除浮动,父级内内容的高度为20px+2px=22px,在id1中增加样式height=“22px”即可。
效果图:
缺点:对父级设置合适的高度来清除浮动的这种方法必须要知道父级内容的高度。比较不方便。
2、clear:both清除浮动:在父级元素结束前,增加以下红色代码,清除浮动。
<div id="id1" style="width:300px;border:1px solid black">
<div id="id2" style="width:100px;height:20px;float:left;border:1px solid red">第一个div</div>
<div id="id3" style="width:100px;height:20px;float:left;border:1px solid blue">第二个div</div>
<div id="id4" style="clear:both"></div> /*增加此句,清除浮动*/
</div>
效果图:
3、父级div定义overflow:hidden清除浮动:
id1增加overflow:hidden样式,即可清除父级元素内使用float:left/float:right产生的浮动。
效果图:
以上是清除浮动的三种方法,望大神指教。
参考:http://www.divcss5.com/jiqiao/j406.shtml
html/css 两个div在同一行的更多相关文章
- 如何让两个div在同一行显示?一个float搞定
最近在学习div和css,遇到了一些问题也解决了很多以前以为很难搞定的问题.比如:如何让两个div显示在同一行呢?(不是用table表格,table对SE不太友好)其实,<div> 是一个 ...
- div+css:两个div并排等高 (table-cell)
两个div并排等高 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- 两个div在同一行,两个div不换行
方法一: <div style="display:inline"> <div id="div1" style="float:left ...
- 两个div在同一行显示
栅格系统需要引用bootstrap插件 <script src="~/Scripts/BootStrap/bootstrap.js"> </script> ...
- css两个form不换行,两个div并排代码
1.form不换行通过table布局实现 <table> <tr> <td> <form method="get" action=&quo ...
- 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: 100px; float: left; 右侧列自适应 margin-left:100px; 注意要用在div上的style
css 两列 左侧列固定 width: 100px; float: left; 右侧列自适应 margin-left:100px; 注意要用在div上的style .con1{ width: 100p ...
随机推荐
- <Chapter 2>2-2-2-1.介绍JSPs,JSTL,和EL(Introducing JSPs, JSTL, and EL)
现在,我们的时钟显示了UTC时区的时间.我们希望我们的应用可以让用户自定义时区,并且为将来的访问记住用户的偏好.为了做到这一点,我们使用Google帐户来识别哪个用户正在使用这个应用. 在我们深入了解 ...
- android 源码编译中的错误 解决
1.编译种错误提示: arm-none-linux-gnueabi-gcc: directory: No such file or directory arm-none-linux-gnueabi-g ...
- MYSQL event_scheduler
一.概述 事件调度器是在 MySQL 5.1 中新增的另一个特色功能,可以作为定时任务调度器,取代部分原先只能用操作系统任务调度器才能完成的定时功>能.例如,Linux 中的 crontabe ...
- Codeforces Round #372 (Div. 1) B. Complete The Graph (枚举+最短路)
题目就是给你一个图,图中部分边没有赋权值,要求你把无权的边赋值,使得s->t的最短路为l. 卡了几周的题了,最后还是经群主大大指点……做出来的…… 思路就是跑最短路,然后改权值为最短路和L的差值 ...
- No module named BeautifulSoup
遇到 No module named BeautifulSoup 错误,但是的确从官方下载了BeautifulSoup,并安装成功. 后来才发现,有两个BeautifulSoup的版本,一个是2012 ...
- 咏南中间件支持DELPHI低版本开发的两层程序平稳升级到三层
提供DELPHI中间件及中间件集群,有意请联系. N年前,我们用DELPHI低版本开发的两层程序(比如工厂ERP系统),现在仍然在企业广泛地得到使用,但老系统有些跟不上企业的发展需要了.主要表现在:虽 ...
- C#引用传递
学过C#的人都知道,通过值或通过引用,值类型和引用类型都可以作为方法参数传递.在C#中,不管是值类型或者是引用类型,所有方法参数在默认情况下是通过值传递的. 1)通过值传递值类型 在通过值传递作为方法 ...
- Linux命令行访问网页
找到个好资料,备份行: http://hi.baidu.com/oyvfhp/blog/item/3aa5ced5b40563d351da4bb0.html CURL --- 命令行浏览器 这东西 ...
- EasyUI 下拉列表联动
//绑定部门.人员下拉菜单项 function BindDdl() { var $ddlbm = $("#ddlBm");//部门下拉列表 var $ddlry = $(" ...
- when not exists 用法
USE [ChangHong_612]GO/****** Object: StoredProcedure [dbo].[st_MES_UpdateInspectResult] Script Date: ...