直接贴代码吧

先总结一下吧  有两种方法

一    最外层设置一个大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. 201521123106 《Java程序设计》第14周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 2. 书面作业 1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自 ...

  2. 201521123109 《java程序设计》第13周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu ...

  3. 201521123029《Java程序设计》第十二周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 书面作业 将Student对象(属性:int id, String name,int age,doubl ...

  4. linux下iconv()函数的用法(转载并修改）

    linux shell 配置文件中默认的字符集编码为UTF-8 .UTF-8是unicode的一种表达方式,gb2312是和unicode都是字符的编码方式,所以说gb2312跟utf-8的概念应该不 ...

  5. 【二】刚学Python的几道简单练习题

    python交友娱乐会所:613176398 1.使用while循环输入 1 2 3 4 5 6     8 9 10 2.求1-100的所有数的和 3.输出 1-100 内的所有奇数 4.输出 1- ...

  6. unity3D写一个hello world

    unity3D写一个hello world 打开unity并且在assets建立一个新的文件,新的文件命名为hello world.unity.接着创建一个新的C#Sript脚本文件,命名为hello ...

  7. appium整理文档

    from appium import webdriver import time,unittest,HTMLTestRunner class Testlogin(unittest.TestCase): ...

  8. JVM（五）内存（Heap）分配

    前面的两小节,我分享了一下JVM的垃圾回收算法和垃圾回收器,本节中,我们来看看JVM的内存分配到底是如何进行的,作为对前面两节内存回收的补充. 从前面的内存回收中我们了解到,Hotspot JVM中的 ...

  9. Spring 3.x 读书笔记

    第一:如果使用BeanFactory作为Spring Bean的工厂类,则所有的bean都是在第一次使用该Bean的时候实例化 第二:如果使用ApplicationContext作为Spring Be ...

  10. MVC发布网站

    首先Vs打开解决方案 在Global.asax中加入下列代码,否则会出现CSS JS失效 BundleTable.EnableOptimizations = false; 用户 'NT AUTHORI ...