zoukankan      html  css  js  c++  java
  • div布局小技巧

    第一:

    多个div整齐排列在外层div中,如图:

    看到所有小的div的前后左右间隔都相等。假定已经制作好上述单元div控件。在外层大div中循环开始创建它们。

    for (var i=0; i < cellSum; i++) {
    	  var cell = new CellPhoto("2.jpg","影集套系"+id,interval,this.cellWidth,this.cellHeight
    	var divCell=cell.createNormalCell();
    	div.appendChild(divCell);
    	};
    

     上面有interval,自然能计算出cellWidth,cellHeight,设置cell的marginTop也为interval.这样就能基本实现上述界面效果,但是如果很多行的话,会发现最下面一行会紧贴外层div的下边界,为了美观,我们需要最下面一行与下边界的间距也是interval,这是本文重点需要解决的问题。

    很简单,找到小div中的最后一个,设置其marginBottom=interval,这样的话,外层div会检测到有元素需要更多的纵向空间,画布就会自动增加interval的高度。用单个元素的margin便控制了最后一行的整体效果,非常方便,和WPF中WrapPanel非常相似。

    第二:

    元素定位的时候CSS文件必须添加position属性,一般是这样的:

    #div0{

      position:absolute;

      left:0px;

      top:0px;

    有了left和top就可以定位一个dom,如果在此处想在有便宜,可以继续使用margin来调整,也可以继续使用left和top调整

    #div0{

      position:absolute;

      left:0px;

      top:0px;

      marginLeft:100px;

      marginTop:100px;

    第二:

    任何一个div居中可以这样写:

    假设该div宽度为w,高度为h

    #div1{

      position:relative;

      left:50%;

      top:50%;

      marginLeft:-w/2.0+'px';

      marginTop:-h/2.0+'px';

    }

  • 相关阅读:
    mysql中delimiter
    error: unpacking of archive failed on file /usr/sbin/zabbix_agent;592e5bc3: cpio: open
    CefSharp中文帮助文档
    ASP.NET Aries 开发框架
    简洁的富文本编辑器
    asp.net core 获取appsettings.json里的配置
    在asp.net core中使用NLog
    临时禁用Resharper
    visual studio 无添加视图 选项
    visual studio(vs)初始化
  • 原文地址:https://www.cnblogs.com/JimmyBright/p/4483798.html
Copyright © 2011-2022 走看看