精华内容
下载资源
问答
  • 在网页往往需要左右结构,例如下面效果: 那么下面就实现以下: 效果: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"...

    在网页中往往需要左右结构,例如下面效果:

    这里写图片描述

    那么下面就实现以下:

    效果:

    这里写图片描述

    代码如下:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,minimal-ui" />
            <title>页面左右结构(其中一端自适应)</title>
            <style type="text/css">
                /*右边*/
                .my-box{
                    width: 100%;
                    height: 150px;
                    margin-top: 50px;
                }
                .my-box-right{
                    width: 100px;
                    height: 100%;
                    float: right;
                    background-color: red;
                }
                .my-box-left{
                    overflow: hidden;
                    background-color: yellowgreen;
                    height: 100%;
                }
                /*左边*/
                .my-box-left2{
                    width: 100px;
                    height: 100%;
                    float: left;
                    background-color: red;
                }
                .my-box-right2{
                    overflow: hidden;
                    background-color: yellowgreen;
                    height: 100%;
                }
            </style>
        </head>
        <body>
            <div class="my-box">
                <div class="my-box-right">
                    <!--浮动的盒子优先显示-->
                    我是右边
                </div>
                <div class="my-box-left">
                    右边固定,左边自适应!右边固定,左边自适应!右边固定,左边自适应!
                    右边固定,左边自适应!右边固定,左边自适应!右边固定,左边自适应!
                    右边固定,左边自适应!右边固定,左边自适应!右边固定,左边自适应!
                    右边固定,左边自适应!右边固定,左边自适应!右边固定,左边自适应!
                </div>
            </div>
            <div class="my-box">
                <div class="my-box-left2">
                    <!--浮动的盒子优先显示-->
                    我是右边
                </div>
                <div class="my-box-right2">
                    左边固定,右边自适应!左边固定,右边自适应!左边固定,右边自适应!
                    左边固定,右边自适应!左边固定,右边自适应!左边固定,右边自适应!
                    左边固定,右边自适应!左边固定,右边自适应!左边固定,右边自适应!
                    左边固定,右边自适应!左边固定,右边自适应!左边固定,右边自适应!
                    左边固定,右边自适应!左边固定,右边自适应!左边固定,右边自适应!
                    左边固定,右边自适应!左边固定,右边自适应!左边固定,右边自适应!
                </div>
            </div>
        </body>
    </html>
    
    展开全文
  • postman界面变成了左右结构怎么办

    千次阅读 2018-01-17 21:26:01
  • Flutter 左右菜单联动

    千次阅读 2019-05-22 17:00:23
    效果: 像这种左右菜单联动的效果很常见...很简单,分为左右结构,左边是一个ListView,右边也是一个ListView,然后按比例显示即可 return new Row( mainAxisAlignment: MainAxisAlignment.start, children: &l...

    效果:

    在这里插入图片描述在这里插入图片描述

    像这种左右菜单联动的效果很常见,即点击左边菜单列表右边刷新,这里演示一下在Flutter中的实现


    页面结构

    很简单,分为左右结构,左边是一个ListView,右边也是一个ListView,然后按比例显示即可

        return new Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            new Expanded(
                flex: 2,
                child: Container(
                  color: YColors.color_fff,
                  child: new ListView.builder(
                      itemCount: _datas.length,
                      itemBuilder: (BuildContext context, int position) {
                        return getRow(position);
                      }),
                )),
            new Expanded(
                flex: 5,
                child: ListView(
                  children: <Widget>[
                    Container(
                      //height: double.infinity,
                      alignment: Alignment.topLeft,
                      padding: const EdgeInsets.all(10),
                      color: YColors.color_f3f3f3,
                      child: getChip(index), //传入一级分类下标
                    ),
                  ],
                )),
          ],
        );
    

    这里用到Expanded,flex参数等同于Android中的权重。

    然后把两个ListView的item构建抽出来了。


    左边item getRow:

      Widget getRow(int i) {
        return new GestureDetector(
          child: new Container(
            alignment: Alignment.center,
            padding: EdgeInsets.symmetric(vertical: 15, horizontal: 10),
            color: Colors.white,
            child: new Text(_datas[i].name,
                style: TextStyle( color: YColors.color_666, fontSize: 16)),
          ),
          onTap: () {
            setState(() {
              
            });
          },
        );
      }
    

    很简单,就是一个text显示文字。


    右边item getChip:

      Widget getChip(int i) {
        return Wrap(
          spacing: 10.0, //两个widget之间横向的间隔
          direction: Axis.horizontal, //方向
          alignment: WrapAlignment.start, //内容排序方式
          children: List<Widget>.generate(
            articles.length,
            (int index) {
              return ActionChip(
                //标签文字
                label: Text(articles[index].title,
                    style: TextStyle(fontSize: 16, color: YColors.color_666)),
                //点击事件
                onPressed: () {
                  
                },
                elevation: 3,
              );
            },
          ).toList(),
        );
      }
    

    item用的是Chip标签,Flutter Chip详解


    点击更新

    ok ,现在是左右两个列表都完成了(测试数据完全可以写死),那怎么做到点击左边的item 刷新右边的列表呢?

    在android 中可以用notifyDataSetChanged,在Flutter中,因为Widget 分为有状态(StatefulWidget)和无状态(StatelessWidget)的,所以要先继承自StatefulWidget,然后用setState方法更新数据源即可。

    所以我们单独写一个方法来更新数据:

      List<NaviDataArticle> _updateArticles(int i) {
        setState(() {
          if (_datas.length != 0) 
          	articles = _datas[i].articles;
        });
        return articles;
      }
    

    接收一个int下标参数,根据一级分类下标更新二级分类集合。


    一般进来都是默认选中第一个菜单,可以在initState()方法中对这个一级分类下标进行初始化,一级分类下标index 默认为0

    	setState(() {
            _datas = naviEntity.data;
            index = 0;
          });
    

    然后在一级分类列表的item点击事件中对一级分类index进行赋值,并修改选中item 的样式。

      Color textColor = YColors.colorPrimary; //字体颜色
    
      Widget getRow(int i) {
        return new GestureDetector(
          child: new Container(
            alignment: Alignment.center,
            padding: EdgeInsets.symmetric(vertical: 15, horizontal: 10),
            color: index == i ? YColors.color_f3f3f3 : Colors.white,
            child: new Text(_datas[i].name,
                style: TextStyle(
                    color: index == i ? textColor : YColors.color_666,
                    fontSize: 16)),
          ),
          onTap: () {
            setState(() {
              index = i; //记录选中的下标
              textColor = YColors.colorPrimary;
            });
          },
        );
      }
    

    然后右边列表在渲染之前,先更新数据

      Widget getChip(int i) {
        //更新对应下标数据
        _updateArticles(i);
        return Wrap(
          ...
        );
      }
    


    完整代码:https://github.com/yechaoa/wanandroid_flutter/blob/master/lib/pages/naviPage.dart



    展开全文
  • div 左中右结构布局问题

    千次阅读 2014-10-14 09:06:03
    回车符 把left的float设置为left, 把right的float设置为right, 把center的float也设置成left; 把clear的属性写成clear :"both";就可以了, 要设置一个div框把main撑开就行啦
    <DIV ID="MAIN">
       <div id=left></div>
       <div id=center></div>
       <div id=right></div>
    <div id=clear>回车符</div>
    </div>
    把left的float设置为left,
    把right的float设置为right,
    把center的float也设置成left; 
    把clear的属性写成clear :"both";就可以了,
    要设置一个div框把main撑开就行啦
    展开全文
  • layui左右布局

    千次阅读 2019-08-13 14:50:45
    左右布局 点击左边右边内容切换 html <div class="layui-side layui-bg-black"> <div class="layui-side-scroll"> <ul class="layui-nav layui-nav-tree site-demo-nav" lay-filter="leftNav"> ...
  • div+css左右结构 一边固定另一边自适应技巧   1、左边固定,右边自适应    这里是右边的内这里是右边的内这里是右边的内这里是右边的内这里是右边的内这里是右边的内这里是右边的内这里是...
  • 首先想到的是完成效果,也就是左右200,中间自适应。 &amp;lt;div id=&quot;left&quot;&amp;gt;我是左边&amp;lt;/div&amp;gt; &amp;lt;div id=&quot;center&quot;&amp;gt;...
  • 在一个双向链表,p是中间某个结点,,在p后插入s的语句序列为什么不可以调换顺序?比如图的1 2两句调换位置会有什么问题?![图片](https://img-ask.csdn.net/upload/201510/27/1445912686_183105.jpg)
  • jeecg左右布局左树表单

    千次阅读 2018-07-31 15:46:55
    里面布置easyui-layout左右分栏,加载树,定义树的击事件。树的加载调用cfgTreeController里面getcfgTreeData和getTreeData两个方法。树击调用cfgTreeController里update方法,update方法加载cfgList.jsp。可以...
  • DIV 左右布局方案

    万次阅读 2017-03-01 20:59:26
    DIV 左右布局方案
  • div 进行左右分离

    千次阅读 2013-02-19 09:57:23
     在css分别指定了左右两列的宽度的情况下,只需要将左边的div 向浮动{float:left;},右边的div 向浮动{float:right;},并清除浮动,即可实现。  常用的清除浮动有两种方式:  a、通过在浮动元素的父级...
  • Vue实现左右菜单联动实现

    千次阅读 2018-08-11 16:58:39
    知乎 个人博客 Github 源码传送门:Rain120/vue-study 之前在外卖软件上看到这个左右联动的效果,觉得很...菜单的DOM结构 &amp;lt;scroll class=&quot;left-menu&quot; :data=&quot;left...
  • 我们在布局的时候通常会在导航栏上有居左和居显示,中间留白,这样页面伸缩的时候不会影响效果。形如下图 以往我们可能更多会使用float浮动布局来实现这种效果,但是flex得到广泛支持以后就可以更方便和快捷的...
  • 采用孩子兄弟结构实现森林

    千次阅读 2015-11-26 15:53:45
    森林也就是多棵树组合在一起,本文采用孩子兄弟结构实现,先说一下我的过程
  • DIV+CSS上中下左中右布局案例

    千次阅读 2017-12-06 19:17:29
    DIV+CSS是现在流行的布局方式,这里展示的是简单的上中下左中右布局案例
  • 之前我介绍过一种按位数编码保存树形结构数据的表设计方法,详情见: 浅谈数据库设计技巧(上) 该设计方案的优点是:只用一条查询语句即可得到某个根节点及其所有子孙节点的先序遍历。由于消除了递归,在数据记录量...
  • iframe上左右布局

    万次阅读 多人点赞 2017-07-22 20:41:57
    在left.html怎么写链接可以显示到content.html页面呢,道理很简单,在left.html的导航使用target,target="iframeContent",就是这个代码,通过iframe的id,链接可跳转至框架的content.html,这样就得到了...
  • Jquery实现左右轮播效果

    万次阅读 2018-09-05 22:11:07
     本文主要用Jquery框架实现左右轮播效果,这个框架可以通过http://jquery.com/下载。 首先展示下静态布局h5代码,代码非常简单。 &lt;div id="slide"&gt; &lt;ul class="pic-list&...
  • 我花了一夜用数据结构给女朋友写个H5走迷宫游戏

    万次阅读 多人点赞 2019-09-10 23:27:18
    又到深夜了,我按照以往在csdn和公众号写着数据结构!这占用了我大量的时间!我的超越妹妹严重缺乏陪伴而 怨气满满! 而女朋友时常埋怨,认为数据结构这么抽象难懂的东西没啥作用,常会问道:天天写这玩意,有啥...
  • 新闻列表标题和日期的左右分别对齐的几种处理方法前言在新闻列表,有标题和日期,然后分别对齐,这种应用场景非常广泛。而在前端实践,其也有很多布局方式。很多前端新手在入门时,可能会稍微有点迷茫。今天...
  • lz的页面是左右各一个分隔条实现拖拽的,左边是框架自带一个功能没问题,右边是lz模仿的,结果样子是出来了,就是左右拖拽的方向反了,向拖应该是增大,它却缩小,向应该是缩小,却是增大。 这个问题停了...
  • SQL左右连接的on and和on where的区别

    万次阅读 多人点赞 2014-09-29 23:08:28
    本文详细解释了SQL左右连接的on and和on where的区别以及内连接inner joinon and 和on where的区别,全部是实例验证,不是空口胡说欢迎拍砖。
  • 出去面试、被问到计算机数据结构和算法的问题,尴了个尬,听不懂,虽说自己是前端开发,平时算法的问题还是考虑的少点了,自己总结吧~多沉淀点~什么是树?树是一种数据结构,它是由n(n&gt;=1)个有限结点组成一...
  • 不管是,反正就是一边宽度固定,一边宽度自适应。这种布局比较常见,博客园很多默认主题就是这种。一般情况下,这种布局宽度固定的区域是侧边栏,而自适应的区域是主体内容区——相信把侧边栏搞成自适应的人...
  • sql左右连接的区别

    千次阅读 2012-04-11 14:45:35
    关键字: 左右连接 数据表的连接有: 1、内连接(自然连接): 只有两个表相匹配的行才能在结果集中出现 2、外连接: 包括 (1)外连接(左边的表不加限制) (2)外连接(右边的表不加限制) ...
  • 操作步骤如下: 其中步骤3选择Split Vertically 是分成左右双栏;选择Split Horizontally 是分成上下双栏 左右双栏: 上下双栏:
  • 左右两栏布局写法

    千次阅读 2017-12-28 22:56:23
    左右布局,一般情况是左边宽度固定,右边宽度自适应。 浮动布局 .list { float : left ; width : 200 px ; } .context { border-left : 200 px solid #999 ; height : 500 px ;...
  • 数据结构:八大数据结构分类

    万次阅读 多人点赞 2018-09-05 18:23:28
    数据结构分类 数据结构是指相互之间存在着一种或多种关系的数据元素的集合和该集合...数组是可以再内存连续存储多个元素的结构,在内存的分配也是连续的,数组的元素通过数组下标进行访问,数组下标从0开始...
  • 解决前端左右滑动和上下滑动的时间冲突

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 403,090
精华内容 161,236
关键字:

做是左右结构还是左中右结构