如何让两个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在同一行显示?一个float搞定的更多相关文章
- 两个div在同一行显示
栅格系统需要引用bootstrap插件 <script src="~/Scripts/BootStrap/bootstrap.js"> </script> ...
- html/css 两个div在同一行
在界面设计的时候,经常需要将两个div在同一行显示. 但是每次都会忘记怎么做,特此随笔,备忘. 如以下要将“第一个div”和“第二个div”显示在同一行: <div id="id1&q ...
- css:多个div在同一行显示
使用float:left,也可以使用display : inline-block,可以使多个div在同一行显示. 示例如下: <div class="search_row"& ...
- Jquery一个slideToggle搞定div的隐藏与显示
Jquery一个slideToggle搞定div的隐藏与显示 <!DOCTYPE html> <html> <head> <script src=" ...
- 忘带U盘了??别急!一行python代码即可搞定文件传输
近日发现了python一个很有趣的功能,今天在这里给大伙儿做一下分享 需求前提 1.想要拷贝电脑的文件到另一台电脑但是又没有U盘2.手机上想获取到存储在电脑的文件3.忘带U盘- 您也太丢三落四了吧,但 ...
- 两个div在同一行,两个div不换行
方法一: <div style="display:inline"> <div id="div1" style="float:left ...
- 两个div不同高度并排显示
在HTML中让两个div并排显示,通常情况下有三种实现方式,包括: (1)设置为行内样式,display:inline-block (2)设置float浮动 (3)设置position定位属性为abs ...
- css实现两个div并排等高(一个div高度随另一个高度变化而变化)
方法一.两个div都设置 display: table-cell; 方法二.父级div设置 display: -webkit-box;
- 点击按钮对两个div的隐藏与显示进行切换
HTML: <button type="button" id="showHidden">点击切换div的隐藏与显示</button> ...
随机推荐
- Linux下Source Insight的安装和汉化
原创文章,转载请注明出处. 工欲善其事,必先利其器.Source Insight绝对是阅读C和C++代码的利器,另外,Source Insight的体量很小,安装便捷,显示直观,比vim+cscope ...
- [LeetCode] Power of Three 判断3的次方数
Given an integer, write a function to determine if it is a power of three. Follow up:Could you do it ...
- <img>标签链接地址失效如何自动显示默认图片
<img src="errurl" onerror="this.src='default.jpg'">
- 开发socketserver 以及定制开发自己的FTP服务器
socket server 示例 #服务端程序 import socketserver class TcpHandler(socketserver.BaseRequestHandler): def h ...
- vuex 初体验
vuex是vue的状态管理工具,vue进阶从es6和npm开始,es6推荐阮一峰大神的教程. vuex学习从官方文档和一个记忆小游戏开始.本着兴趣为先的原则,我先去试玩了一把-->. Vuex ...
- jdbc读取数据库,表相关信息(含注释)
读取数据库中的所有的表名 private Set<String> getTableNameByCon(Connection con) { Set<String> set = n ...
- 冰冻三尺非一日之寒--web框架Django(翻页、cookie)
第二十一章 cookie 1.获取Cookie: request.COOKIES['key'] request.get_signed_cookie(key, default=RAISE_ERROR, ...
- C#面向对象设计模式纵横谈——1.面向对象设计模式与原则
一:设计模式简介 每一个模式描述了一个在我们周围不断重复发生的问题,以及该问题的解决方案的核心. ---- Christopher Alexander 软件设计领域设计模式: 设计模式描述了软件设计过 ...
- centos7 安装lnmp环境
准备工作 一.配置防火墙 vim /etc/sysconfig/iptables 开启80端口.3306.22端口 -A INPUT -m state --state NEW -m tcp -p tc ...
- linux动态代码注入
参考网上文章:http://www.freebuf.com/articles/system/6388.html 按照文章,实现了代码的动态注入,即对一个正在运行的进程,在不重启的情况下执行一段不在原程 ...