第一次写关于技术的博客,觉得写这个东西主要是为了记录一下自己在写代码中遇到的不明白的地方,并且记录下来。
前几天写了一个关于答题的页面,其中美工妹子设置的选项是这个样子的

就是经验太少了,也可能我确实是头脑简单,四肢发达,因为美工妹子给的选项都是刚好一行就可以放下的,于是就直接写了两个div然后display:inline-block。哈哈哈哈,我以为万事大吉了,就这样我愉快的写完了这个页面,然后提交到svn。还在窃喜今天可以早点下班,这个时候,开发的大哥给我连发了几个窗口抖动。。。。我已经感到了不安。

oh~no,还回什么家,然后打开代码瞅啊瞅,我还是个实习生啊,我也很绝望啊,由于最近我导师让我接触的flex布局比较多,所以我想啊想,决定用flex还解决这个尴尬的小小小bug,在这两个div外面包个div,然后设置了display:flex,然后在文字上设置flex:20,圆圈设置flex:1,我发现这样不行,因为我给圆圈设置的width和height,已经被flex影响,这个圈已经不再是我设定的那个圈,是一个被挤压的畸形的丑的不能再丑的圈,然后我就在chorme上继续调flex的值。终于那个圈好像是恢复了它原本的样子,我就用了测试机测了一下,发现在ios还可以的,它还是那个圈,但是在android上,还是那个畸形的圈。我意识到我这个解决办法可能并不完美(其实就是不对),但是我还是想不到该咋整,因为我的神助攻小学长不知道跑哪里去了,快下班了,我得跟开发大哥有个交代啊,

左等右等小学长终于回来了,看了看我的代码,然后就帮我改了一下又给我上了一课,说这种结构是很常见的左右布局,有一遍是固定的,一边是自适应,可以把固定的那边absolute一下,然后自适应的那一块给它一个padding,留出的一定的位置给固定的那个div就ok了。小学长说这种挺常见的,还有什么双飞翼的布局结构,也都很常见,。学长讲完后,我隐约记起以前好像遇到过相似的问题,但是自己的习惯太不好了,不善于总结,以至于问过之后又忘了,现在把这个反复遇到的问题记录下来,希望以后不要再在同一个地方跌倒。
浙公网安备 33010602011771号