css 折行、两栏自适应布局 、子元素等高

1.css 对于文字的长度超出设置后是会自动折行的，但对于数字或英文却不是

  所以要应用到 word-wrap:break-word 或者 word-break;都可以对(数字、英文)强制换行

2.white-space:nowrap 强制不换行 配合 over-flow; text-overflow:ellipsis 可用于 省略超出长度部分为... 的效果。

3.两栏自适应布局 

第一种方法如下

 

.parent{
	display: table-cell;   // IE6-7 display: inline-block;
	width: 9999px;
}
.firstChild{
	 float: left;
	 width: 200px;
}
<div class="parent">
    <div class="firstChild"> first child</div>
    <div class="secondChild"> second child</div>
 </div>

第二种方法如下

.parent{
    position:relative
}
.firstChild{
    position:absolute;
    width:200px;
    top:0;
    left:0;
}
.secondChild{
    margin-left:200px;
    
}

4.子元素等高

.parent{
	display: table-row;
}
.firstChild{
	width: 50%;
	display: table-cell;
}
.secondChild{
	width: 50%;
	display: table-cell;
}

 <div class="parent">
    <div class="firstChild"> 许多个元素</div>
    <div class="secondChild"> second child</div>
 </div>

5.多行文字垂直居中 /对于图片也适用

   .parentElement{
        display: table-cell;vertical-align:middle;
        width: 300px;height: 600px;border: 1px solid #dcdcdc;
   }