前端页面中如何在窗口缩放时让两个div始终在同一行显示
直接贴代码吧
先总结一下吧 有两种方法
一 最外层设置一个大div 给这个大div固定的宽度和高度
给里面两个小div 设置浮动 设置宽高
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>两个DIV并排</title>
<style>
.div-a{ float:left;width:500px;height:100px;border:1px solid #F00;}
.div-b{ float:left;width:500px;height:100px;border:1px solid #000;}
</style>
</head>
<body>
<div style="min-width:1200px;height:200px">
<div class="div-a">第一个DIV盒子</div>
<div class="div-b">第二个DIV盒子</div>
</div>
</body>
</html>
二 最外层设置一个大div 给这个大div设置display:flex
给里面两个小div 设置浮动 设置宽高
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>两个DIV并排</title>
<style>
.div-a{ float:left;width:500px;height:100px;border:1px solid #F00;}
.div-b{ float:left;width:500px;height:100px;border:1px solid #000;}
</style>
</head>
<body>
<div style="display: flex">
<div class="div-a">第一个DIV盒子</div>
<div class="div-b">第二个DIV盒子</div>
</div>
</body>
</html>
前端页面中如何在窗口缩放时让两个div始终在同一行显示的更多相关文章
- 设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示;当页面滚动到起始位置时,头部div出现,底部div隐藏
设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示: 当页面滚动到起始位置时,头部div出现,底部div隐藏 前端代码: <! ...
- 在前端页面中使用Markdown并且优化a标签
近期在自己的项目中加入了对 Markdown 语法 的支持,主要用到的是markedjs这个项目.该项目托管在github上,地址为:https://github.com/markedjs/marke ...
- 在前端页面中使用@font-face来显示web自定义字体【转】
本文转自W3CPLUS 的<CSS @font-face> @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现, ...
- 使用原生ajax访问后台数据并将其展现在前端页面中(小菜鸟自己整理玩的,大神勿喷)
首先你要有php的环境,关于php环境的搭建,php本地站点的搭建,此处不再重复请看这里:http://www.cnblogs.com/Gabriel-Wei/p/5950465.html我们把wam ...
- THINKPHP_(7)_THINKPHP6的controller模型接收前端页面通过ajax返回的数据,会因为一个div而失败
这个随笔比较短. 同样的前端页面代码,修改了一下,后端模型接收不到数据. 利用beyond compare软件比对两个前端文件, 发现多了一个</div>标签. 多了一个</div& ...
- win32 窗口缩放时出现闪屏
今天无意发现之前写的一个小工具在缩放窗口的时候,出现闪屏,主要有两个位置: 工具栏出一闪屏 右侧的控制面板出现闪屏 (这个控制面板与多层元件组合而成) 之前真没注意到这个问题,平时都是最大化/恢复窗口 ...
- JS 在open打开的子窗口页面中调用父窗口页面的JS方法
需求的情景如下: 1:做新增或修改等操作的时候打开一个新的浏览器窗口(使用window.open(参数等)方法) 2:在新增或修改等的页面上有返回按钮.重置按钮.保存按钮,对于返回就直接关闭此窗口(使 ...
- web前端页面中异步使用百度地图API
<div id="allmap"></div> //百度地图API功能 function loadJScript() { var script = docu ...
- 前端页面中:jsp和HTML的区别之处
JSP和HTML的区别 HTML页面是静态页面,也就是事先由用户写好放在服务器上,固定内容,不会变,由web服务器向客户端发送,平时上网看的网页都是大部分都是基于html语言的. JSP页面是有JSP ...
随机推荐
- openfire:openfire单独编译指定插件的方法
方法一: openfire默认编译时,是同时编译主程序和所有在plugins目录中的插件.但进行插件开发时,这样编译就太费时费力.使用ant plugins可以只编译插件,能够节省部分时间.最节省时间 ...
- shell脚本之流程控制
shell脚本之流程控制 shell脚本之流程控制 条件语句 条件判断 循环语句for,while,until for循环 while循环 until循环 循环控制语句continue 循环控制语 ...
- MySQL集群(二)之主主复制
前面介绍了主从复制,这一篇我将介绍的是主主复制,其实听名字就可以知道,主主复制其实就是两台服务器互为主节点与从节点.接下来我将详细的给大家介绍,怎么去配置主主复制! 一.主从复制中的问题 1.1.从节 ...
- java 数组内的最大组合数
给定一个任意长度的java数组,求数组内的数能组合出来的最大整数比如说{9,98,123,32} 最大就是 99832123 import java.util.Arrays; import java. ...
- Eclipse集成spket插件_Ext-5.1.0
1, spket-1.6.23.jar下载 官网下载:http://www.spket.com/download.html , 百度网盘地址: http://pan.baidu.com/s/1qXH ...
- mysql5.6.24的安装与简单使用
1, 下载绿色版Mysql5.6.24 http://dlsw.baidu.com/sw-search-sp/soft/ea/12585/mysql-5.6.24-win32.1432006610.z ...
- MongoDB 索引篇
MongoDB 索引篇 索引的简介 索引可以加快查询的速度,但是过多的索引或者规范不好的索引也会影响到查询的速度.且添加索引之后的对文档的删除,修改会比以前速度慢.因为在进行修改的时候会对索引进行更新 ...
- 在有main函数的前提下 eclipse找不到主类
有时候在测试类的时候eclipse会莫名奇妙的提示找不到主类 接下来分别有几种解决办法 1.在项目上右击> Builder Path -> Configure Build Path - ...
- Eclipse 多行复制并且移动失效
Eclipse 有个好用的快捷键 即 多行复制 并且移动 但是 用 Win7 的 电脑 的 时候 发现屏幕 在 旋转 解决方案: 打开Intel的显卡控制中心 把旋转 的 快捷键 进行更改 就好 ...
- Python初识2
27.Python中没有{}括起来的代码块,使用pass来代替c语言中的{(无内容)}: 28.使用__name__来指示模块是如何加载的,如果是被导入的,那么__name__就是该模块的名字,如果是 ...