最近在学习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

  怎么样,是不是很简单?

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

  1. 两个div在同一行显示

    栅格系统需要引用bootstrap插件 <script src="~/Scripts/BootStrap/bootstrap.js"> </script> ...

  2. html/css 两个div在同一行

    在界面设计的时候,经常需要将两个div在同一行显示. 但是每次都会忘记怎么做,特此随笔,备忘. 如以下要将“第一个div”和“第二个div”显示在同一行: <div id="id1&q ...

  3. css:多个div在同一行显示

    使用float:left,也可以使用display : inline-block,可以使多个div在同一行显示. 示例如下: <div class="search_row"& ...

  4. Jquery一个slideToggle搞定div的隐藏与显示

    Jquery一个slideToggle搞定div的隐藏与显示 <!DOCTYPE html> <html> <head> <script src=" ...

  5. 忘带U盘了??别急!一行python代码即可搞定文件传输

    近日发现了python一个很有趣的功能,今天在这里给大伙儿做一下分享 需求前提 1.想要拷贝电脑的文件到另一台电脑但是又没有U盘2.手机上想获取到存储在电脑的文件3.忘带U盘- 您也太丢三落四了吧,但 ...

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

    方法一: <div style="display:inline"> <div id="div1" style="float:left ...

  7. 两个div不同高度并排显示

    在HTML中让两个div并排显示,通常情况下有三种实现方式,包括: (1)设置为行内样式,display:inline-block (2)设置float浮动 (3)设置position定位属性为abs ...

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

    方法一.两个div都设置 display: table-cell; 方法二.父级div设置 display: -webkit-box;

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

    HTML: <button type="button"  id="showHidden">点击切换div的隐藏与显示</button> ...

随机推荐

  1. JS中字符串的true转化为boolean类型的true

    var a="True"; a = eval(a.toLowerCase()); alert(typeof a); //boolean alert(a);//true 正解,eva ...

  2. 详解用CSS3制作圆形滚动进度条动画效果

    主  题 今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客<CSS实现进度条和订单进度条>,但是呢, ...

  3. thrift:swift项目笔记

    先声明:此swift不是Apple公司的那个swift开发语言,而是facebook的另一个开源项目. facebook的thrift IDL文件,如果默认用thrift -gen java生成jav ...

  4. Python学习--Python简介

    Python 简介 Python是一种解释型.编译性.面向对象.动态数据类型的高级程序设计语言.Python由Guido van Rossum于1989年底发明,第一个公开发行版发行于1991年. P ...

  5. HTML 字符实体 &lt; &gt: &amp;等

    在 HTML 中,某些字符是预留的. 在 HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签. 如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用 ...

  6. NPOI导出数据,设置格式,锁定单元格

    代码包括: 1:导出多个sheet    2:设置单元格格式   3:合并单元格   4:下拉框选项   5:输入数字限制   6:锁定单元格 static void Main(string[] ar ...

  7. DevExpress.chartControt画趋势图

    private void DrawLine(DataTable dt) { Myalysis.Series.Clear(); //图标位置 Myalysis.Legend.AlignmentHoriz ...

  8. BZOJ 后缀自动机四·重复旋律7

    后缀自动机四·重复旋律7 时间限制:15000ms 单点时限:3000ms 内存限制:512MB 描述 小Hi平时的一大兴趣爱好就是演奏钢琴.我们知道一段音乐旋律可以被表示为一段数构成的数列. 神奇的 ...

  9. PHP编码规范PSR-1

    .note-content { font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", STHeit ...

  10. 字符串作为map的key

    #include <map> #include <string> struct cmp_str{ bool operator()(char const* a, char con ...