横向滚动布局 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 {/*** 横向滚动 *** ...
随机推荐
- Springboot项目配置druid数据库连接池,并监控统计功能
pom.xml配置依赖 <!-- https://mvnrepository.com/artifact/com.alibaba/druid --> <dependency> & ...
- linux环境下快速安装Mariadb和Redis
一 Mariadb(Mysql)篇 1.新建一个yum源仓库 touch /etc/yum.repos.d/Mariadb.repo 2.在这个yum源仓库文件中,添加仓库url地址 [mariadb ...
- 报错:[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop bei
项目中遇到父组件传值 activeIndex <Tabs :tabs="tabs" :activeIndex="activeIndex" >< ...
- 微信小程序访问豆瓣api403问题解决方发法
微信小程序访问豆瓣api403问题解决方法一览:通过豆瓣api可以获取很多电影.书籍等的数据信息.昨晚上用微信小程序请求豆瓣api,竟然被豆瓣拒绝了.(豆瓣设置了小程序的访问权限):下面就跟着小编一起 ...
- Error response from daemon: conflict: unable to remove repository reference 解决方案
由于前一章演示用的镜像没什么用准备删除 docker image rm hello-world:latest Error response from daemon: conflict: unable ...
- (一) Getting Started
Elasticsearch is a highly scalable open-source full-text search and analytics engine. It allows you ...
- SegNet 理解与文章结构
SegNet: A Deep Convolutional Encoder-Decoder Architecture for Image Segmentation 发表于2016年,作者 Vijay B ...
- FineUIPro v5.2.0已发布(jQuery升级,自定义图标,日期控件)
FineUIPro/MVC/Core/JS v5.2.0 已经于 2018-8-20 发布,官网示例已更新,如果大家在测试中发现任何问题,请回复本帖,谢谢了. 在线示例: FineUI Pro:htt ...
- 基于微服务的DevOps落地指南 交付效率提升40%
基于微服务的DevOps落地指南 交付效率提升40% 2015-2016年,珍爱线下门店已新增覆盖城市9个,与此同时,CRM系统大小故障却发生了数十起... ... 珍爱网是以“网络征选+人工红娘”模 ...
- DOTween 相关API效果
1,首先看一遍完整Tween路径 2,操作 DoPlay->DoRestart,DoRestart是从调用时刻重新开始开始执行Tween 3,操作 DoPlay->DoReWind,DoR ...