【css flex】将多个<div>放在同一行
使用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>放在同一行的更多相关文章
- css flex布局
关于flex布局的一些简单用法 效果(下图) 实现代码: <!--html--> <div class="wrap"> <div class=&quo ...
- CSS选择器、标签,div的位置。
今天是休假,布置了一个作业,是利用CSS制作斯坦福大学官网.虽然是一个并不复杂的制作,却让我第一次体会到了想摔鼠标的感觉. 遇到了很多问题,却找不出自己到底是哪里出了问题,简简单单的一个logo.足足 ...
- CSS Flex
关于flex 请看这里 https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 太详细啦!!! 还通俗易懂!!! 没啥好说的 不过上面那篇文 ...
- div+css 怎么让一个小div在另一个大div里面 垂直居中
div+css 怎么让一个小div在另一个大div里面 垂直居中 方法1: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 .parent { width:800 ...
- CSS flex 布局快速入门
以前已经学过flex了,一直没做笔记,现在做下笔记再回忆下. 首先,flex布局的迷之属性们,如果一知半解,机械记忆的话,那不到半个月基本忘光光.先感受一下这12个flex布局属性,是不是很“迷”人. ...
- 87.CSS Flex 弹性盒模型布局教程(共用的css在48篇文章gird)
CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 dis ...
- html/css 两个div在同一行
在界面设计的时候,经常需要将两个div在同一行显示. 但是每次都会忘记怎么做,特此随笔,备忘. 如以下要将“第一个div”和“第二个div”显示在同一行: <div id="id1&q ...
- 利用css如何让嵌套的div层不继承父div层的透明度?
http://zhidao.baidu.com/link?url=cvQhh0Q7_ah0qg9tc-2zP0cjB_PoIiIq6t6RFpp4aZPPNoVJUqyy7TT41TU5pWzRtRY ...
- CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法
CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法 平时我们布局时候,有的文字内容多了会超过溢出我们限制的高度,有的图片会撑破DIV,让网页错位变乱. 这样我们就需要解决如何使用CSS来超出设 ...
随机推荐
- 解决error: Your local changes to the following files would be overwritten by merge
在项目里我们一般都会把自己第一次提交的配置文件忽略本地跟踪 1 [Sun@webserver2 demo]$ git update-index --assume-unchanged <filen ...
- XP 终端服务组件 恢复补丁包 terminal service patch
terminal 终端服务组件恢复包 下载地址(点击) winconnect server xp软件 下载地址(点击)
- NGUI之scroll view的制作和踩坑总结
之前也看了不少童鞋谢了关于NGUI的scroll view的制作下面我写下自己的制作过程以及心得,希望对童鞋们有所帮助.1.首先建立一个960*640的背景参考http://game.ceeger.c ...
- 巧妙的利用Mongodb做地理空间查询
- Nginx伪静态配置和常用Rewrite伪静态规则集锦
伪静态是一种可以把文件后缀改成任何可能的一种方法,如果我想把php文件伪静态成html文件,这种相当简单的,下面我来介绍nginx 伪静态配置方法 nginx里使用伪静态是直接在nginx.conf ...
- HTML性能优化
摘要: 页面优化是对网页中的HTML代码进行必要的调整,可以有效地精简页面中的冗余代码,加快网页显示速度,减少网页占用搜索引擎服务器的存储空间,提高用户体验和搜索引擎友好性,当然也可以更好的突出页面的 ...
- 08python之列表的常用方法
列表list是python常用的数据类型,需要掌握以下常用方法: name_list = ['alex','tenglan','65brother'] 这个变量和之前的变量只存一个数字或字符串,这个列 ...
- Unity随机Prefab,自动前往某点处理
对与U3D AI,看了下,自己做了小功能,以备后用啊! 一,在某区域随机产生某个对象 C# 文件名称为RadomAPoint.cs using UnityEngine; using System.C ...
- windows下配置VisualSVN Server服务器
下载安装文件: 服务端安装文件:VisualSVN-Server-1.6.2 客户端安装文件:TortoiseSVN-1.5.5.14361-win32-svn-1.5.4 上面是我使用的版本. 在V ...
- Java环境变量中classpath是必须配置吗
设置环境变量在java 中需要设置三个环境变量(1.5之后不用再设置classpath了,但个人强烈建议继续设置以保证向下兼用问题)JDK安装完成之后我们来设置环境变量:右击“我的电脑”,选择“属性” ...