有时候，我们可能会产生多个div标签横向排列而不换行的需求，具体有以下几种实现方法：

1. 同级div设置display:inline-block，父级div强制不换行
例如：

<html>

<head></head>

<body>

<div id="container">

<div class="lable">测试测试</div>

<div class="lable">测试测试</div>

<div class="lable">测试测试</div>

<div class="lable">测试测试</div>

<div class="lable">测试测试</div>

<div>

</body>

<style>

#container {

width:400px;

height: 200px;

background-color: red;

overflow: auto;

white-space: nowrap;

}

.lable {

width: 100px;

background-color: blue;

display: inline-block;

}

</style>

</html>

2. 通过position绝对定位实现
例如:

<html>

<head></head>

<body>

<div id="container">

<div id="lable1">测试测试</div>

<div id="lable2">测试测试</div>

<div id="lable3">测试测试</div>

<div id="lable4">测试测试</div>

<div id="lable5">测试测试</div>

<div>

</body>

<style>

#container {

width:400px;

height: 200px;

background-color: red;

overflow: auto;

position: relative;

}

#lable1 {

width: 100px;

margin-left: 0;

background-color: blue;

position: absolute;

}

#lable2 {

width: 100px;

margin-left: 100px;

background-color: blue;

position: absolute;

}

#lable3 {

width: 100px;

margin-left: 200px;

background-color: blue;

position: absolute;

}

#lable4 {

width: 100px;

margin-left: 300px;

background-color: blue;

position: absolute;

}

#lable5 {

width: 100px;

margin-left: 400px;

background-color: blue;

position: absolute;

}

</style>

</html>

　　

3. 通过flex方式实现
具体请参考：Flex 布局教程：语法篇
例如：

<html>

<head></head>

<body>

<div id="container">

<div class="lable">测试测试</div>

<div class="lable">测试测试</div>

<div class="lable">测试测试</div>

<div class="lable">测试测试</div>

<div class="lable">测试测试</div>

<div>

</body>

<style>

#container {

width:400px;

height: 200px;

background-color: red;

display: flex;

display: -webkit-flex;

/* 从左端开始沿水平轴防止flex item */

flex-direction: row;

/* 强制 flex item不换行，沿着同一行堆叠 */

flex-wrap: nowrap;

/* flex item在主轴上的对齐方式，这里定义左对齐 */

justify-content: flex-start;

/* 定义交叉轴对其方式 */

align-items: flex-start

}

.lable {

width: 100px;

margin-left: 5px;

background-color: blue;

}

</style>

</html>

　　

　　不过，这样以来，flex容器的overflow属性将不再起作用。在flex布局下，所有的flex item均分或根据开发者定义分配容器空间，而不会超过flex容器空间。

注意
　　值得注意的时，如果仅仅设置父div容器的overflow属性，容器内的元素均为inline或者inline-block，也无法一直堆叠在同一行而不换行，他们无法撑开父容器。当一行无法放置下它们时间，他们会自动换行。

————————————————
版权声明：本文为CSDN博主「Kiloveyousmile」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/Kiloveyousmile/article/details/80248083

多个div排列在同一行而不换行的更多相关文章

  1. CSS 让div,span等块级、非快级元素排列在同一行

    让div,span等块级.非快级元素排列在同一行 by:授客 QQ:1033553122 例子:让两个div排列在同一行 给div添加float样式 <!DOCTYPE html> < ...

  2. DIV+CSS 让同一行的图片和文字对齐【转藏】

    DIV+CSS 让同一行的图片和文字对齐 DIV+CSS 让同一行的图片和文字对齐 在div+css布局中,如果一行(或一个DIV)内容中有图片和文字的话,图片和文字往往会一个在上一个在下,这是一个新 ...

  3. div中让内容能不换行就尽量不换行.【纯原】

    div中让内容能不换行就尽量不换行,部分左对齐,部分右对齐. <html> <head> <title>九歌·少司命</title> <style ...

  4. DIV+CSS 让同一行的图片和文字对齐

    在div+css布局中,如果一行(或一个DIV)内容中有图片和文字的话,图片和文字往往会一个在上一个在下,这是一个新手都会遇到问题,我的解决方法有三: 1.添加CSS属性:vertical-align ...

  5. 前端页面中如何在窗口缩放时让两个div始终在同一行显示

    直接贴代码吧 先总结一下吧  有两种方法 一    最外层设置一个大div  给这个大div固定的宽度和高度 给里面两个小div 设置浮动  设置宽高 <!DOCTYPE html> &l ...

  6. if函数+isna函数+vlookup函数实现不同列相同单元格内容排列在同一行

    1,首先学习的网址:https://jingyan.baidu.com/album/22a299b5dd0f959e19376a22.html?picindex=1 2,excel 这也许是史上最好最 ...

  7. 使用inline-block，使前面img,后面空div居中显示在一行后，导致当div中有内容时，div下移问题

    .pro_li img,.pro_sm{display: inline-block; *display:inline;*zoom:1;vertical-align: middle ;} 解决方法:使用 ...

  8. 几个简单的css设置问题：div居中，ul li不换行 ，内容超出自动变省略号等

    1  div在页面居中的问题 1)position值为relative时(相对定位),css设置属性margin:0 auto;(0 auto,表示上下边界为0,左右则根据宽度自适应相同值,即居中)即 ...

  9. DIV内英文或者数字不换行的问题 解决办法

    word-wrap:break-word; word-break:break-all;

随机推荐

  1. 学习日记6、easyui datagrid 新增一行，编辑行，结束编辑和删除行操作记录

    1.新增一行并进入编辑状态 var index=$('#Numbers').datagrid('appendRow', { CardInformation: '开户行', CardNumber: '银 ...

  2. JavaWeb-SpringSecurity自定义登陆配置

    系列博文 项目已上传至guthub 传送门 JavaWeb-SpringSecurity初认识 传送门 JavaWeb-SpringSecurity在数据库中查询登陆用户 传送门 JavaWeb-Sp ...

  3. Warning: setcookie() expects parameter 3 to be long, string given

    Warning: setcookie() expects parameter 3 to be long, string given 这个是我用php7.0会报这个错误, 切换低版本php5.6就ok

  4. SV服务器

    什么是服务端? 就是安装了服务端软件的电脑 下载 VisualSVN是一款图形化svn服务器. 官 网: http://www.visualsvn.com/server/ 下载地址: http://w ...

  5. spring mvc路径匹配原则

    Ant path 匹配原则 在Spring MVC中经常要用到拦截器,在配置需要要拦截的路径时经常用到<mvc:mapping/>子标签,其有一个path属性,它就是用来指定需要拦截的路径 ...

  6. DVWA----DVWA System error - config file not found. Copy config/config.inc.php.dist to config/config.inc.php and configure to your environment.

    DVWA简介:DVWA(Damn Vulnerable Web Application)是一个用来进行安全脆弱性鉴定的PHP/MySQL Web应用,旨在为安全专业人员测试自己的专业技能和工具提供合法 ...

  7. delphi 权限控制(delphi TActionList方案)

    在软件开发中,为软件加入权限控制功能,使不同的用户有不同的使用权限,是非常重要的一项功能,由其在开发数据库方面的应用,这项功能更为重要.但是,要为一个应用加入全面的权限控制功能,又怎样实现呢?大家知道 ...

  8. Linux0.11之进程0创建进程1（1）

    进程0是由linus写在操作系统文件中的,是预先写死了的.那么进程0以后的进程是如何创建的呢?本篇文章主要讲述进程0创建进程1的过程. 在创建之前,操作系统先是进行了一系列的初始化,分别为设备号.块号 ...

  9. iOS上传图片问题

    今天一定得写一篇博客,有以下原因: 1>第一次做图片上传的功能,算是一种记录吧; 2>在这个问题上,纠结,迷茫了很久,主要还是被后台坑了; 1.上传图片的方法是用的AFNetWorking ...

  10. spring boot密码管理

    1.引入依赖 <dependency> <groupId>com.github.ulisesbocchio</groupId> <artifactId> ...