分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 软件开发

【css flex】将多个<div>放在同一行

发布时间:2023-09-06 02:35责任编辑:彭小芳关键词:divflex

 

使用style里的flex属性

默认情况下,一个div独占一行

使用css选择器给外层div加上以下flex属性,则该div的子div可以在同一行中显示,

.runs-paginator-flex-container { ?flex: 1 1 auto; ?flex-direction: row-reverse; ?display: flex;}
<div className="runs-paginator-flex-container"> ???<div>1</div> ???<div>2</div></div>

关于flex字段:

https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex

关于flex direction字段:https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-direction

注意 flex-direction有4个选项:column,row,column-reverse,row-reverse,分别代表:在一列中放多个div,上对齐;在一行中放多个div,左对齐;在一列中放多个div,下对齐;在一行中放多个div,右对齐。

有人认为还能使用float,但是float的初衷是实现文字环绕图片,我用float并没有成功实现多个div放在同一行

关于float:https://www.yinchengli.com/2016/09/16/css-layout/

【css flex】将多个<div>放在同一行

原文地址:https://www.cnblogs.com/zealousness/p/10557584.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved