微信小程序 —— 多个div(多个微信小程序view)横向排列的便捷方法

在写自适应div( web端 )或view(微信端)的布局时,可以用以下俩种方法进行便捷布局 :

  1. 利用外层div或外层view的display : flex ; flex-flow : row;

  2. 利用外层div或外层view的white-space:nowrap;属性

white-space属性值
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的

 标签。 
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到
标签为止。
pre-wrap 保留空白符序列,但是正常地进行换行。
pre-line 合并空白符序列,但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。

微信小程序 —— 多个div(多个微信小程序view)横向排列的便捷方法_第1张图片

web端例子:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display_flextitle>
    <style>
        .all_div{
            width:100%;
            white-space: nowrap;
        }
        .div-item{
            width:100%;
            display: inline-block;
            border:1px solid red;
        }
        /*
        .all_div{
            width:300%;
            display: flex;
            flex-flow: row;
        }
        .div-item{
            width:100%;
            display: inline-block;
            border:1px solid red;
        }
        */
    style>
head>
<body>
<div class="all_div">
    <div class="div-item">
        <h1>移动应用开发h1>
        <div>接入微信开放平台,让你的移动应用支持微信分享、微信收藏和微信支付。div>
    div>
    <div class="div-item">
        <h1>移动应用开发h1>
        <div>接入微信开放平台,让你的移动应用支持微信分享、微信收藏和微信支付。div>
    div>
    <div class="div-item">
        <h1>移动应用开发h1>
        <div>接入微信开放平台,让你的移动应用支持微信分享、微信收藏和微信支付。div>
    div>
div>
body>
html>
小程序端例子:
-wxml
 <scroll-view class="free-verticalScroll" scroll-y="true" scroll-height-animation  bindscrolltoupper="Scrolltoupper" bindscrolltolower="Scrolltolower"  bindscroll="scrolltolower" style="height:200rpx;">
      <view id="free_verticalScroll_item1" class="free-verticalScroll-item">
        <view class="h1">移动应用开发view>
        <view class="fontSize35 text-center">接入微信开放平台,让你的移动应用支持微信分享、微信收藏和微信支付。view>
      view>
      <view id="free_verticalScroll_item2" class="free-verticalScroll-item">
        <view class="h1">网站应用开发view>
        <view class="fontSize35 text-center">接入微信开放平台,让你的网站支持使用微信帐号来登录view>
      view>
      <view id="free_verticalScroll_item3" class="free-verticalScroll-item">
        <view class="h1">公众帐号开发view>
        <view class="fontSize35 text-center">接入微信开放平台公众帐号开发,为亿万微信用户提供轻便的服务。view>
      view>
    scroll-view>
-wxss
.free-horizontalScroll{
  white-space: nowrap;
}
.free-horizontalScroll-item{
  width:100%;
  display: inline-block;
  white-space: pre-wrap;
}

你可能感兴趣的:(微信小程序)