横向滚动布局 white-space:nowrap
- float + 两层DOM实现
html<div class="container">
<div class="div1 clearfix">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div>
css
.container {
width: 200px;
overflow: hidden;
}
/* float:left */
.div1 {
overflow: hidden;
width: 700px;
}
.div1 > div {
width: 200px;
float:left;
margin-left: 10px;
background: green;
border:1px solid red;
} - display:inline-block + 两层DOM 实现
<div class="container">
<div class="div2">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div>
css
/* display: inline-block */
.div2 {
overflow: hidden;
width: 700px;
}
.div2 > div {
width: 200px;
display: inline-block;
border: 1px solid green;
} - white-sapce:nowrap 减少一层DOM
html<div class="div3">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
css
/* white-sapce: nowrap 能减少一层DOM*/
.div3 {
white-space: nowrap;
overflow: hidden;
}
.div3 > div {
width: 200px;
display: inline-block;
border: 1px solid blue;
}
横向滚动布局 white-space:nowrap的更多相关文章
- Android简易实战教程--第四十六话《RecyclerView竖向和横向滚动》
Android5.X后,引入了RecyclerView,这个控件使用起来非常的方便,不但可以完成listView的效果,而且还可以实现ListView无法实现的效果.当然,在新能方便也做了大大的提高. ...
- js实现文字横向滚动
页面布局 <div id="scroll_div" class="fl"> <div id="scroll ...
- Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
本博主在一次个人移动端项目中,遇到这么一个需求:希望自己的项目中,头部导航条的效果可以像今日头条那样,横向滚动! 对于这样的效果,在各大移动端项目中几乎是随处可见,为什么呢? 我们都知道,对于移动端也 ...
- 使用elementUI滚动条之横向滚动
用过elementUI组件应该会知道它内置一个滚动效果,官网对此组件没有相关文档,也是细心网友发现的. <el-scrollbar></el-scrollbar> 将会出现滚动 ...
- 利用overflow-x实现横向滚动的xiaoguo
在进行app开发中经常遇到横向滚动的效果,相信很多人都是用js写的吧,其实用css的overflow-x也可以写出啦哦~~~ (1)介绍overflow-x: 1)浏览器支持 所有主流浏览器都支持 o ...
- 微信小程序scroll-view横向滚动
官方文档给的代码复制下来发现无法滚动,没反应,使用css设置浮动属性也无效 官方没有给出css代码,横向需要设置两个css属性才行: white-space: nowrap; ----规定段落中的文本 ...
- Android 横向列表GridView 实现横向滚动
Android 横向列表实现,可左右滑动,如下图 1.主界面布局代码:activity_main.xml a.包裹HorizontalScrollView控件是GirdView横向滚动的基本条件b.G ...
- jQuery实现文字横向滚动效果
HTML代码: <div id="aaa" style="width:100px; position:relative; white-space:nowrap; o ...
- react-native 横向滚动的商品展示
在app中会有这种页面 像这样商品是横向的,而且要滚动,思路是利用 ScrollView 横向的滚动 思路: (a): 横向滚动的整体作为一个组件 ShopCenter {/*** 横向滚动 *** ...
随机推荐
- SQLServer之创建LOGON触发器
LOGON触发器工作原理 登录触发器将为响应 LOGON 事件而激发存储过程. 与 SQL Server实例建立用户会话时将引发此事件. 登录触发器将在登录的身份验证阶段完成之后且用户会话实际建立之前 ...
- Django REST framework基础:序列化
表结构: class Article(models.Model): id = models.AutoField(primary_key=True) title = models.CharField(m ...
- 多线程控制工具类--倒计时器CountDownLatch的使用(模仿火箭发射)
package com.thread.test.Lock; import java.util.Random; import java.util.concurrent.CountDownLatch; i ...
- kernel笔记——中断
cpu与磁盘.网卡.键盘等外围设备(相对于cpu和内存而言)交互时,cpu下发I/O请求到这些设备后,相对cpu的处理能力而言,磁盘.网卡等设备需要较长时间完成请求处理. 那么在请求发出到处理完成这段 ...
- 授权普通非DBA用户可以有权限查看执行计划的方法
drop table PLAN_TABLE; 删除原plan表 执行ORACLE自带的创建脚本 @?/rdbms/admin/utlxplan.sql 创建同义词 create or re ...
- 2018-2019-2 20175332-实验一《Java开发环境的熟悉》实验报告
一.安装IDEA 1.在官方网站下载IDEA安装包https://www.jetbrains.com/idea/download/#section=windows 2.破解软件,第一次参考博客是:ht ...
- (hdu 6030) Happy Necklace 找规律+矩阵快速幂
题目链接 :http://acm.hdu.edu.cn/showproblem.php?pid=6030 Problem Description Little Q wants to buy a nec ...
- vue-cli的跨域配置(自己总结)
- P3389 【模板】高斯消元法
高斯消元求解n元一次线性方程组的板子题: 先举个栗子: • 2x + y - z = 8-----------① •-3x - y + 2z = -11---------② •-2x + y + ...
- Angular6封装http请求
最近抽空学习了一下Angular6,之前主要使用的是vue,所以免不了的也想对Angular6提供的工具进行一些封装,今天主要就跟大家讲一下这个http模块. 之前使用的ajax库是axios,可以设 ...