使用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>放在同一行的更多相关文章

  1. css flex布局

    关于flex布局的一些简单用法 效果(下图) 实现代码: <!--html--> <div class="wrap"> <div class=&quo ...

  2. CSS选择器、标签,div的位置。

    今天是休假,布置了一个作业,是利用CSS制作斯坦福大学官网.虽然是一个并不复杂的制作,却让我第一次体会到了想摔鼠标的感觉. 遇到了很多问题,却找不出自己到底是哪里出了问题,简简单单的一个logo.足足 ...

  3. CSS Flex

    关于flex 请看这里  https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 太详细啦!!!  还通俗易懂!!! 没啥好说的 不过上面那篇文 ...

  4. 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 ...

  5. CSS flex 布局快速入门

    以前已经学过flex了,一直没做笔记,现在做下笔记再回忆下. 首先,flex布局的迷之属性们,如果一知半解,机械记忆的话,那不到半个月基本忘光光.先感受一下这12个flex布局属性,是不是很“迷”人. ...

  6. 87.CSS Flex 弹性盒模型布局教程(共用的css在48篇文章gird)

    CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 dis ...

  7. html/css 两个div在同一行

    在界面设计的时候,经常需要将两个div在同一行显示. 但是每次都会忘记怎么做,特此随笔,备忘. 如以下要将“第一个div”和“第二个div”显示在同一行: <div id="id1&q ...

  8. 利用css如何让嵌套的div层不继承父div层的透明度?

    http://zhidao.baidu.com/link?url=cvQhh0Q7_ah0qg9tc-2zP0cjB_PoIiIq6t6RFpp4aZPPNoVJUqyy7TT41TU5pWzRtRY ...

  9. CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法

    CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法 平时我们布局时候,有的文字内容多了会超过溢出我们限制的高度,有的图片会撑破DIV,让网页错位变乱. 这样我们就需要解决如何使用CSS来超出设 ...

随机推荐

  1. JBPM——工作流概念

    一.概念          工作流(Workflow),就是"业务过程的部分或总体在计算机应用环境下的自己主动化",它主要解决的是"使在多个參与者之间依照某种提前定义的规 ...

  2. MVC中导航菜单,选中项的高亮问题。。

    先上图:             这个菜单是放在母板页的.比如当前选中的是异常业务监控.如果页面刷新了.就会变成第一张图..选择其他的选项也会,因为页面会刷新嘛.. 怎么处理这个问题了? 答案是记录当 ...

  3. 同一种类型的两个对象赋值,用反射。再也不用点属性了。。。。(适用于ef)

    /// <summary> /// 给对象赋值的方法(不赋地址)(同一个类型),含过滤 /// </summary> /// <typeparam name=" ...

  4. 【Java面试题】37 说出ArrayList,Vector, LinkedList的存储性能和特性

    ArrayList和Vector都是使用数组方式存储数据,此 数组元素数大于实际存储的数据以便增加和插入元素,它们都允许直接按序号索引元素,但是插入元素要涉及数组元素移动等内存操作,所以索引数据快而插 ...

  5. MathType在字母上加虚线的方法

    在数学中根据不同的需要,会对其中的公式或变量字母作不同的标记.这些标记在用MathType编辑数学公式时同样也要准确地编辑出来,例如在字母上方加虚线.这种数学样式在使用时也是根据自己的数学问题来使用的 ...

  6. 插入数据insert语句中出错:没有与这些操作数匹配的“+”运算符,操作数类型为:const char[ ]+CString

    UpdateData(); CString n; n.Format(L"%d", m_n); _bstr_t strCmd_n = "insert into n(材料,折 ...

  7. IDE、SATA、SCSI、SAS、FC、SSD 硬盘类型

    http://www.cnblogs.com/awpatp/archive/2013/01/29/2881431.html

  8. python2.0_s12_day9之day8遗留知识(queue队列&生产者消费者模型)

    4.线程 1.语法 2.join 3.线程锁之Lock\Rlock\信号量 4.将线程变为守护进程 5.Event事件 * 6.queue队列 * 7.生产者消费者模型 4.6 queue队列 que ...

  9. 编写一个读写倾斜测量数据.s3c文件格式的OSG插件osgdb_s3c

    VS新建一个空的DLL工程 ReaderWriterS3C.cpp源文件 #include <osg/Notify> #include <osgDB/FileNameUtils> ...

  10. linux 启动时文件系统错误

    由于我把/dev/VolGroup00/lvData写在了/etc/fstab中,后面又把这个lv给删除了,导致出现下面开机启动的错误: 解决办法: 1.进入单用户模式下,当修改/etc/fstab时 ...