多个div排列在同一行而不换行
有时候，我们可能会产生多个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排列在同一行而不换行的更多相关文章
- CSS 让div,span等块级、非快级元素排列在同一行
让div,span等块级.非快级元素排列在同一行 by:授客 QQ:1033553122 例子:让两个div排列在同一行 给div添加float样式 <!DOCTYPE html> < ...
- DIV+CSS 让同一行的图片和文字对齐【转藏】
DIV+CSS 让同一行的图片和文字对齐 DIV+CSS 让同一行的图片和文字对齐 在div+css布局中,如果一行(或一个DIV)内容中有图片和文字的话,图片和文字往往会一个在上一个在下,这是一个新 ...
- div中让内容能不换行就尽量不换行.【纯原】
div中让内容能不换行就尽量不换行,部分左对齐,部分右对齐. <html> <head> <title>九歌·少司命</title> <style ...
- DIV+CSS 让同一行的图片和文字对齐
在div+css布局中,如果一行(或一个DIV)内容中有图片和文字的话,图片和文字往往会一个在上一个在下,这是一个新手都会遇到问题,我的解决方法有三: 1.添加CSS属性:vertical-align ...
- 前端页面中如何在窗口缩放时让两个div始终在同一行显示
直接贴代码吧 先总结一下吧 有两种方法 一 最外层设置一个大div 给这个大div固定的宽度和高度 给里面两个小div 设置浮动 设置宽高 <!DOCTYPE html> &l ...
- if函数+isna函数+vlookup函数实现不同列相同单元格内容排列在同一行
1,首先学习的网址:https://jingyan.baidu.com/album/22a299b5dd0f959e19376a22.html?picindex=1 2,excel 这也许是史上最好最 ...
- 使用inline-block，使前面img,后面空div居中显示在一行后，导致当div中有内容时，div下移问题
.pro_li img,.pro_sm{display: inline-block; *display:inline;*zoom:1;vertical-align: middle ;} 解决方法:使用 ...
- 几个简单的css设置问题：div居中，ul li不换行 ，内容超出自动变省略号等
1 div在页面居中的问题 1)position值为relative时(相对定位),css设置属性margin:0 auto;(0 auto,表示上下边界为0,左右则根据宽度自适应相同值,即居中)即 ...
- DIV内英文或者数字不换行的问题 解决办法
word-wrap:break-word; word-break:break-all;
随机推荐
- 关于int main(int argc,char* argv[])详解
平时在VS的环境下,主函数总会看到这两个参数,今天突然很想知道这两个参数的原理以及作用,因此查了下资料.真心受教了. 下面的博文是在百度空间看一位大神的,原文链接:http://hi.baidu.co ...
- iOS8-Sampler
https://github.com/shu223/iOS8-Sampler iOS8-Sampler Code examples for the new functions of iOS 8. Ho ...
- 协程系列之Event Loops
Event Loops 事件循环 事件是由程序的一部分在特定条件下发出的消息,循环是在某种条件下完成并执行某个程序直到它完成的构造,因此,事件循环是一个循环,它允许用户订阅事件传输并注册处理程序/回调 ...
- Mui 底部导航切换
1.建好子模板目录 2.导航代码 <nav class="mui-bar mui-bar-tab"> <a id="defaultTab" c ...
- 黑马vue---8-10、v-cloak、v-text、v-html、v-bind、v-on的基本使用
黑马vue---8-10.v-cloak.v-text.v-html.v-bind.v-on的基本使用 一.总结 一句话总结: v-bind等这些东西都是用的vue.data里面的变量 1.使用 v- ...
- centos7编译安装Python 3.6.8 后用pip3出现SSL未配置问题（import ssl失败）解决方法
下载源码编译安装openssl https://www.openssl.org/source/openssl-1.0.2j.tar.gz ./config --prefix=/usr/local/op ...
- [转]html中meta作用
meta是html语言head区的一个辅助性标签.几乎所有的网页里,我们可以看到类似下面这段的html代码: <head> <meta http-equiv="cont ...
- 阶段3 3.SpringMVC·_06.异常处理及拦截器_5 SpringMVC拦截器之编写controller
先新建包,com.itcast.controller,然后把异常拦截的项目的UserController复制过来. 复制过来稍作修改 创建pages文件件,然后新建success.jsp页面 部署当前 ...
- Mysqlfunc.c
int rc;int db_connection;char *server = "192.168.139.207"; // 数据库的ip地址char *user = "c ...
- spring boot configuration annotation processor not found in classpath
<dependency> <groupId> org.springframework.boot </groupId> <artifactId> spri ...