直接贴代码吧

先总结一下吧  有两种方法

一    最外层设置一个大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始终在同一行显示的更多相关文章

  1. 设置一个div网页滚动时，使其固定在头部，当页面滚动到距离头部300px时，隐藏该div，另一个div在底部，此时显示；当页面滚动到起始位置时，头部div出现，底部div隐藏

    设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示: 当页面滚动到起始位置时,头部div出现,底部div隐藏 前端代码: <! ...

  2. 在前端页面中使用Markdown并且优化a标签

    近期在自己的项目中加入了对 Markdown 语法 的支持,主要用到的是markedjs这个项目.该项目托管在github上,地址为:https://github.com/markedjs/marke ...

  3. 在前端页面中使用@font-face来显示web自定义字体【转】

    本文转自W3CPLUS 的<CSS @font-face> @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现, ...

  4. 使用原生ajax访问后台数据并将其展现在前端页面中（小菜鸟自己整理玩的，大神勿喷）

    首先你要有php的环境,关于php环境的搭建,php本地站点的搭建,此处不再重复请看这里:http://www.cnblogs.com/Gabriel-Wei/p/5950465.html我们把wam ...

  5. THINKPHP_(7)_THINKPHP6的controller模型接收前端页面通过ajax返回的数据，会因为一个div而失败

    这个随笔比较短. 同样的前端页面代码,修改了一下,后端模型接收不到数据. 利用beyond compare软件比对两个前端文件, 发现多了一个</div>标签. 多了一个</div& ...

  6. win32 窗口缩放时出现闪屏

    今天无意发现之前写的一个小工具在缩放窗口的时候,出现闪屏,主要有两个位置: 工具栏出一闪屏 右侧的控制面板出现闪屏 (这个控制面板与多层元件组合而成) 之前真没注意到这个问题,平时都是最大化/恢复窗口 ...

  7. JS 在open打开的子窗口页面中调用父窗口页面的JS方法

    需求的情景如下: 1:做新增或修改等操作的时候打开一个新的浏览器窗口(使用window.open(参数等)方法) 2:在新增或修改等的页面上有返回按钮.重置按钮.保存按钮,对于返回就直接关闭此窗口(使 ...

  8. web前端页面中异步使用百度地图API

    <div id="allmap"></div> //百度地图API功能 function loadJScript() { var script = docu ...

  9. 前端页面中：jsp和HTML的区别之处

    JSP和HTML的区别 HTML页面是静态页面,也就是事先由用户写好放在服务器上,固定内容,不会变,由web服务器向客户端发送,平时上网看的网页都是大部分都是基于html语言的. JSP页面是有JSP ...

随机推荐

  1. 201521123048 《Java程序设计》第9周学习总结

    1. 本周学习总结 2. 书面作业 本次PTA作业题集异常 常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己以前编写的代码中经常出现什么异常.需要捕获吗(为什么)?应如何避免? ...

  2. MD格式示例

    一个例子: 例子开始 1. 本章学习总结 今天主要学习了三个知识点 封装 继承 多态 2. 书面作业 Q1. java HelloWorld命令中,HelloWorld这个参数是什么含义? 今天学了一 ...

  3. JavaSE（十）之Collection总结

    前面几篇把集合中的知识大概都详细的说了一遍,但是我觉得还是要总结一下,这样的话,可以更好的理解集合. 一.Collection接口 首先我们要一张图来说明: Collection接口,它是集合的顶层接 ...

  4. POJ 3190 Stall Reservations （优先队列）C++

    Stall Reservations Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 7646   Accepted: 271 ...

  5. JDBC操作数据库之批处理

    JDBC开发中,操作数据库需要和数据库建立连接,然后将要执行的SQL语句发送到数据库服务器,最后关闭数据库连接,都是按照这样的操做的,如果按照此流程要执行多条SQL语句,那么就要建立多个数据库连接,将 ...

  6. linux下Nginx配置文件(nginx.conf)配置设置详解（windows用phpstudy集成）

    linux备份nginx.conf文件举例: cp /usr/local/nginx/nginx.conf /usr/local/nginx/nginx.conf-20171111(日期) 在进程列表 ...

  7. oracle 常用函数汇总

    一.字符函数字符函数是oracle中最常用的函数,我们来看看有哪些字符函数:lower(char):将字符串转化为小写的格式.upper(char):将字符串转化为大写的格式.length(char) ...

  8. SpringAop详解

    近几天学习了一下SpringAop在网上找了一些资料,此链接为原文链接http://www.cnblogs.com/xrq730/p/4919025.html AOP AOP(Aspect Orien ...

  9. getField()和select()方法的区别

    在ThinkPHP中,查询数据库是必不可少的操作. 那么,getField()方法和select()方法都是查询的方法,到底有什么不同呢? 案例来说明: A.select()方法 例子1 $acces ...

  10. 实例讲解webpack的基本使用第一篇

    更新文章不容易,尤其是更新高质量的文章更加不易,因此为了节约时间,闲话就不多说了.关于webpack的介绍,webpack是用来干嘛的,这些基础概念性的东西,就不在此赘述,下面直接开始正题. webp ...