zoukankan      html  css  js  c++  java
  • 解决box-flex不均等分的问题

    我想当你上手css3的时候后一定为他的强大而感到震惊,但是震惊之后带来的一定是苦恼,因为他太TM变态了!

    我之所以这么说是因为我今天写box-flex的时候遇到了一个可以让我蛋碎的问题~~~

    首先,box-flex是干嘛的?

    box-flex可以让某个元素的子元素在剩余空间等分!

    真的,这个功能太好了!

    但是让人恼火,想要喊fuck的是,他有时候居然不等分!

    可以试想,一个用来等分的属性实现不了他自身的功能,这是多么搞笑的事~

    好吧,以上都是我发的牢骚!接下来进入主题~


    box-flex的具体功能是:让某个元素的子元素的空余空间等分!

    记住是空余空间等分!

    例如

    <div id="parent">

      <div id="child1"></div>

      <div id="child2"></div>

    </div>

    这个时候给child1和child2加box-flex:1,的确他们是等分的

    但是,如果是

    <div id="parent">

      <div id="child1">测试内容</div>

      <div id="child2"></div>

    </div>

    这个时候给child1和child2加box-flex:1,他们就不等分了,而是他们的空余空间等分(child1比child2更加长,而这个差值正式“测试内容”这几个字的宽度)

    我想你现在知道我要表达的是什么了吧!

    那么问题来了!挖掘机技术哪家强!fuck!!!不是这句

    我们应该这么解决呢?


    解决方法:

    给child1和child2分别加上1%;

    就这么简单,OK,搞定了!

    接下来我说下我的理解:

    这里你给child1和child2添加了宽度,且宽度相同,那么他们的空余空间肯定相同了,而“相同的空余空间”+“相同1%的宽度” = “相同的总体宽度”,所以就等分了

  • 相关阅读:
    点击链接,取得href的值,但是不转向
    启动和停止MySQL服务
    QuickText for Notepad++
    otepad++ 配置 支持jquery、html、css、javascript、php代码提示
    windows 2008+IIS7+Mysql+PHP5.5 + FastCGI环境配置
    Jquery异步请求数据实例代码
    JS读取本地文件及目录的方法
    c#.net从ftp下载文件到本地
    怎样才能充分利用SQL索引
    jQuery EasyUI Datagrid性能优化专题
  • 原文地址:https://www.cnblogs.com/coolle/p/4129125.html
Copyright © 2011-2022 走看看