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 ...
随机推荐
- Tkinter教程之Event篇(3)
本文转载自:http://blog.csdn.net/jcodeer/article/details/1823550 '''Tkinter教程之Event篇(3)''''''11.两个事件同时绑定到一 ...
- JAVA中的数据结构——集合类(序):枚举器、拷贝、集合类的排序
枚举器与数据操作 1)枚举器为我们提供了访问集合的方法,而且解决了访问对象的“数据类型不确定”的难题.这是面向对象“多态”思想的应用.其实是通过抽象不同集合对象的共同代码,将相同的功能代码封装到了枚举 ...
- Ruby多字节字符的设计
Perl.Python的多字节字符处理方式是UCS(Universal Code Set),Ruby的多字节字符处理方式是CSI(Code Set Independent).UCS的做法是,不管你读取 ...
- Standalone HBase
This is the default mode. Standalone mode is what is described in the quickstart section. In standal ...
- vs2012不能打开项目解决办法
只要卸载这两个不定就能解决问题.
- Spark系列(六)Master注册机制和状态改变机制
各组件的注册流程如下图: 注册机制源码说明: 入口:org.apache.spark.deploy.master文件下的receiveWithLogging方法中的case RegisterAppli ...
- 【Hadoop学习】HDFS中的集中化缓存管理
Hadoop版本:2.6.0 本文系从官方文档翻译而来,转载请尊重译者的工作,注明以下链接: http://www.cnblogs.com/zhangningbo/p/4146398.html 概述 ...
- Crontab设置定时任务
Crontab文件格式 文件格式: minute hour day month weekday username command 格式解析 字段 描述 minute 分,值为0-59 hour 小 ...
- homework 08_2 C++11新特性作业之二
---恢复内容开始--- 1.使用Lambda表达式计算“hello world!”中字母e和i的数量 下面是代码: #include "stdafx.h" #include< ...
- 软件工程——PairProject
结对编程组员: 马辰 11061178 柴泽华 11061153 1) 照至少一张照片, 展现两人在一起合作编程的情况. 结对编程的优点 1)在编程过程中,任何一段代码都不断地复审,同 ...