如何让两个div在同一行显示?一个float搞定

  最近在学习div和css,遇到了一些问题也解决了很多以前以为很难搞定的问题。比如:如何让两个div显示在同一行呢?(不是用table表格,table对SE不太友好)其实,<div> 是一个块级元素,也就是说,浏览器通常会在 div 元素前后放置一个换行符。可以加一个属性float:left,演示代码如下

<div>
   <div style="float:left; width:100px; border:2px solid #aa00FF; ">第一个div</div>
   <div style="float:left; width:100px; border:2px solid #0033FF; ">第二个div</div>
</div>

  实现效果如下:

第一个div

第二个div

  怎么样,是不是很简单?

时间: 2024-10-07 10:21:22

如何让两个div在同一行显示?一个float搞定的相关文章

html/css 两个div在同一行

在界面设计的时候,经常需要将两个div在同一行显示. 但是每次都会忘记怎么做,特此随笔,备忘. 如以下要将“第一个div”和“第二个div”显示在同一行: <div id="id1">  /*外层div*/ <div id="id2" style="width:100px;height:20px;">第一个div</div> <div id="id3" style="widt

css如何实现让两个div在同一行排列

css如何实现让两个div在同一行排列:让两个div元素在同一行排列是基本的操作,实现也非常的简单,可能会对初学者有所帮助.一.使用功能浮动方式:代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <t

“你的这个只要一行代码就能搞定”

帮舍友代写了一个程序,中期检查的时候和他一起去见老师.老师看了说我们的工作量太少.这个几分钟就搞定.最后他居然说:"这个工作量太少了,就调用一行代码的事,几分钟就可以搞定".去之前我知道这个临时做出来的东西,肯定没跟上进度.但好歹有几天的工作量吧.他居然说只要几分钟,一行调用代码.难道用http协议从网上获取天气数据,再解析xml格式的数据,再转换字符串编码,再根据天气选择要绘制的图片和文字,只需要一行代码?难道我不需要查资料,不需要设计界面吗?为了用mfc做出这个界面,我确实费了一番

两个div在同一行,两个div不换行

方法一: <div style="display:inline"> <div id="div1" style="float:left">div1   content</div> <div id="div2" style="float:left">div2   content</div> </div> 上面的div1和div2就会在同一行

CSS让2个DIV在同一行显示的解决方法

在CSS中,div属于块级元素,每个块级元素默认占一行高度,一行内添加一个块级元素后无法一般无法添加其他元素(float浮动后除外).两个块级元素连续编辑时,会在页面自动换行显示.所以默认情况下,2个div是无法显示在同一行的,必须通过样式属性去修改. 解决方方法1:display:inline,将其变成行级元素,这样2个div就会排在同一行. <div style="width:400px;height:300px;?border-width:1px;border-style:solid

css实现两个div并排等高(一个div高度随另一个高度变化而变化)

方法一.两个div都设置 display: table-cell; 方法二.父级div设置 display: -webkit-box; 原文地址:https://www.cnblogs.com/baobao0205/p/11620320.html

点击按钮对两个div的隐藏与显示进行切换

HTML: <button type="button"  id="showHidden">点击切换div的隐藏与显示</button> <div id="div1">请叫我第一层</div> <div id="div2">请叫我第二层</div> JS: <script type='text/javascript'> function show

“你的这个仅仅要一行代码就能搞定”

帮舍友代写了一个程序,中期检查的时候和他一起去见老师.老师看了说我们的工作量太少.这个几分钟就搞定.最后他竟然说:"这个工作量太少了,就调用一行代码的事,几分钟就能够搞定".去之前我知道这个暂时做出来的东西,肯定没跟上进度.但好歹有几天的工作量吧.他竟然说仅仅要几分钟,一行调用代码.难道用http协议从网上获取天气数据,再解析xml格式的数据,再转换字符串编码,再依据天气选择要绘制的图片和文字,仅仅须要一行代码?难道我不须要查资料,不须要设计界面吗?为了用mfc做出这个界面,我确实费了

python实战===一行代码就能搞定的事情!

打印9*9乘法表: >>> print( '\n'.join([' '.join(['%s*%s=%-2s' % (y,x,x*y) for y in range(1,x+1)]) for x in range(1,10)])) 1*1=1 1*2=2 2*2=4 1*3=3 2*3=6 3*3=9 1*4=4 2*4=8 3*4=12 4*4=16 1*5=5 2*5=10 3*5=15 4*5=20 5*5=25 1*6=6 2*6=12 3*6=18 4*6=24 5*6=30 6