最近在学习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. [No00009E]几种常见的命名规则

    变量命名规则 必须遵循的命名规则 1.    变量名首字母必须为字母(a-z A-Z),下划线(_),或者美元符号($)开始php编程中所有变量必须以$开始. 2.    变量名只能是字母(a-z A ...

  2. canvas贝塞尔曲线 - 2

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAugAAAH7CAIAAAARkv1vAAAgAElEQVR4nOy9e5Ab13ngO7Z37dlsaM

  3. codevs 1472 体检

    题目描述 Description 郑厂长不是正厂长 也不是副厂长 他根本就不是厂长 只是公司的一个码农 郑厂长所在的公司每一年都要组织员工体检,比如量身高体重.测血压之类的,今年也不例外. 这次总共有 ...

  4. SASS 入门笔记

    参考资料: SASS 用法指南 SASS 语法 Sass Basics SASS_REFERENCE sass 有两种后缀名文件:一种后缀名为 sass,不使用大括号和分号:另一种就是我们这里使用的 ...

  5. js实现可拖动Div

    随着时代的变化,越来越感觉到js的重要性,js不仅可以做web页面(如Ext框架),还可以做一些web的特效,这些特效不仅兼容PC,而且兼容手机端,毕竟是基于浏览器的,和平台没关系.现在微软的wind ...

  6. android studio 中移除module和恢复module

    一.移除Android Studio中module 在Android Studio中想要删除某个module时,在Android Studio中选中module,右键发现没有delete,如图: An ...

  7. shell及脚本1——变量

    一.shell shell是操作系统与用户之间的沟通的渠道,可以接收并执行用户的命令,有很多shell程序,目前linux默认使用bash shell程序. bash shell有很多实用功能,例如: ...

  8. echarts-在现实标题中显示百分比

    如图:需要在标题显示所占百分比 使用方式:途中标记部分 series : [{ name: '类型', type: 'pie', radius : '55%', center: ['50%', '60 ...

  9. linux0.11改进之四 基于内核栈的进程切换

    这是学习哈工大李治军在mooc课操作系统时做的实验记录.原实验报告在实验楼上.现转移到这里.备以后整理之用. 完整的实验代码见:实验楼代码 一.tss方式的进程切换 Linux0.11中默认使用的是硬 ...

  10. javascript判断数字是integer还是float

    function isFloat(n) { return n === +n && n !== (n|0); } function isInteger(n) { // 仅能检查32位的数 ...