1. 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;
    }
  2. 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;
    }
  3. 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的更多相关文章

  1. Android简易实战教程--第四十六话《RecyclerView竖向和横向滚动》

    Android5.X后,引入了RecyclerView,这个控件使用起来非常的方便,不但可以完成listView的效果,而且还可以实现ListView无法实现的效果.当然,在新能方便也做了大大的提高. ...

  2. js实现文字横向滚动

    页面布局      <div id="scroll_div" class="fl">         <div id="scroll ...

  3. Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条

    本博主在一次个人移动端项目中,遇到这么一个需求:希望自己的项目中,头部导航条的效果可以像今日头条那样,横向滚动! 对于这样的效果,在各大移动端项目中几乎是随处可见,为什么呢? 我们都知道,对于移动端也 ...

  4. 使用elementUI滚动条之横向滚动

    用过elementUI组件应该会知道它内置一个滚动效果,官网对此组件没有相关文档,也是细心网友发现的. <el-scrollbar></el-scrollbar> 将会出现滚动 ...

  5. 利用overflow-x实现横向滚动的xiaoguo

    在进行app开发中经常遇到横向滚动的效果,相信很多人都是用js写的吧,其实用css的overflow-x也可以写出啦哦~~~ (1)介绍overflow-x: 1)浏览器支持 所有主流浏览器都支持 o ...

  6. 微信小程序scroll-view横向滚动

    官方文档给的代码复制下来发现无法滚动,没反应,使用css设置浮动属性也无效 官方没有给出css代码,横向需要设置两个css属性才行: white-space: nowrap; ----规定段落中的文本 ...

  7. Android 横向列表GridView 实现横向滚动

    Android 横向列表实现,可左右滑动,如下图 1.主界面布局代码:activity_main.xml a.包裹HorizontalScrollView控件是GirdView横向滚动的基本条件b.G ...

  8. jQuery实现文字横向滚动效果

    HTML代码: <div id="aaa" style="width:100px; position:relative; white-space:nowrap; o ...

  9. react-native 横向滚动的商品展示

    在app中会有这种页面 像这样商品是横向的,而且要滚动,思路是利用 ScrollView 横向的滚动 思路: (a): 横向滚动的整体作为一个组件  ShopCenter {/*** 横向滚动 *** ...

随机推荐

  1. Springboot项目配置druid数据库连接池,并监控统计功能

    pom.xml配置依赖 <!-- https://mvnrepository.com/artifact/com.alibaba/druid --> <dependency> & ...

  2. linux环境下快速安装Mariadb和Redis

    一 Mariadb(Mysql)篇 1.新建一个yum源仓库 touch /etc/yum.repos.d/Mariadb.repo 2.在这个yum源仓库文件中,添加仓库url地址 [mariadb ...

  3. 报错:[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" >< ...

  4. 微信小程序访问豆瓣api403问题解决方发法

    微信小程序访问豆瓣api403问题解决方法一览:通过豆瓣api可以获取很多电影.书籍等的数据信息.昨晚上用微信小程序请求豆瓣api,竟然被豆瓣拒绝了.(豆瓣设置了小程序的访问权限):下面就跟着小编一起 ...

  5. Error response from daemon: conflict: unable to remove repository reference 解决方案

    由于前一章演示用的镜像没什么用准备删除 docker image rm hello-world:latest Error response from daemon: conflict: unable ...

  6. (一) Getting Started

    Elasticsearch is a highly scalable open-source full-text search and analytics engine. It allows you ...

  7. SegNet 理解与文章结构

    SegNet: A Deep Convolutional Encoder-Decoder Architecture for Image Segmentation 发表于2016年,作者 Vijay B ...

  8. FineUIPro v5.2.0已发布(jQuery升级,自定义图标,日期控件)

    FineUIPro/MVC/Core/JS v5.2.0 已经于 2018-8-20 发布,官网示例已更新,如果大家在测试中发现任何问题,请回复本帖,谢谢了. 在线示例: FineUI Pro:htt ...

  9. 基于微服务的DevOps落地指南 交付效率提升40%

    基于微服务的DevOps落地指南 交付效率提升40% 2015-2016年,珍爱线下门店已新增覆盖城市9个,与此同时,CRM系统大小故障却发生了数十起... ... 珍爱网是以“网络征选+人工红娘”模 ...

  10. DOTween 相关API效果

    1,首先看一遍完整Tween路径 2,操作 DoPlay->DoRestart,DoRestart是从调用时刻重新开始开始执行Tween 3,操作 DoPlay->DoReWind,DoR ...