css左右自适应布局

       如果有这么一个表单需求，前面是一个名称，中间是一个表单，右侧是一个按钮或者一个字符串。
需要自适应布局，名称为固定长度，右侧也是固定，中间部分自适应整个width。

先来看看html标签

1
2
3
4
5
6

<div>
	<label class="name">年龄</label>
	<input type="tel" placeholder="请输入您的年龄" class="input">
	<label class="unit">岁</label>
</div>

首先，我想到的有这么几种display，一个是inline-block。

于是css就变成这样

1

.name,.input,.unit{
       display:inline-block;
   }
   .name,.unit{
       width: 50px;
   }
   .input{
       width: 100%;
       margin: 0 -54px;
       overflow: hidden;
   }
   .input input{
       margin:0 54px;
       display:block;
   }

于是发现，input并不能自动撑开，即便给它加上了block。

再来试试float。

1

.name,.unit{
    width: 50px;
}
.name{
	float:left;
}
.unit{
	float:right;
}
.input{
    overflow: hidden;
}
.input input{
	width:100%;
}

发现还是不行，因为最后的一个.unit，会另起一行。
那就把html结构调整一下

1
2
3
4
5
6
7


<div>
	<label class="name">年龄</label>
	<label class="unit">岁</label>
	<input type="tel" placeholder="请输入您的年龄" class="input">
</div>

终于成功了，但是input的右侧边框被遮住了。
这个是因为input的width是100%，它的border和outline，把width撑开，其实这个时候的input的宽度为100%+4px。
你可以去掉边框，或者宽度设置百分之99，98等。

上面有个margin:0 -54px的css，因为inline-block会有元素间距的产生，具体的可以参考张鑫旭的博客关于inline-block元素间间距(张鑫旭)

2016年02月03日

       年关将至，想写点什么以示存在，无奈之前手贱关了QQ。又不想掌自己嘴巴，就心血来潮写到博客上去，虽然有点low。
       先说说为什么关了QQ。
       我想，每个人的生命里，总会出现这样那样的人，有的主流，有的非主流。直到你遇到一个你从来没有见过的人，而他又无时不刻进来你的空间。
       于是，我跑了。

       早些天我跟小卢开玩笑说，这个冬天真是有点冷。
       这两天尤甚。
       就像回到了一年多的今天，满心哀愁，无力回天。
       所以这个年关对我而言，只是多了几天假期，而已。

       周边的小店陆续关了门，该回家的回家，该过年的过年，我进去一个小超市，买了桶泡面，外加一个手拨蛋。
       一年到头，总有几家欢乐几家愁。
       而这几年来的自己，虽然也令自己厌恶，却着实也过的不易。
       你想啊，好端端的，我为什么要跑，而且还是一个人死命的跑。
       我是真的觉得无路可走，想着路上至少能让我暂且躲避一下，哪怕就一下。

       不过生活也不能总是绝望。
       就像李云说的，你看你，有身高，有颜值，还有工作。多好。
       哈。

       恭喜孟孟被选上，去了英格兰银行，全球最大的金融机构，没有之一。

       恭祝大家新年快乐。

第一篇博客

我从前年转行过来，到现在，已经一年半多了。 想想之前毅然决然转行过来，真是佩服自己。

自己从一个小白，到现在，虽然算不上大牛，连小牛都算不上，倒也颇有心得。 毕竟自己是一步一步自己摸索走下来的。

从网页需要的标签，到css api的研究，再到js库的各种查询，筛选适合自己的插件。 还有从设计那里拿到初稿，然后自己切图，自己做sprite。 再一步步体验到维护的不便，于是找到了gulp工具。 然后一步步走上了正规。

我想说的是，不光技术如此，人生当然也是一样，你走的那些步伐，总会有弯路和不影响结果的路。 但是没关系。 如果没有试错，就没有方向。

欢迎你来到我的博客。 我将竭尽我的所学，展示给你。 希望能给你带来帮助，和快乐。