将头bootstrap设置为float:left,后面的内容设置 display: inline,就可以自动的铺平后续的位置,但会出现乱序,可用padding-left来设置,就不会乱序了。
效果如下:
html代码:
angular.js
AngularJS is an MVC framework for building web applications. The core features include HTML enhanced with custom component and data-binding capabilities, dependency injection and strong focus on simplicity, testability, maintainability and boiler-plate reduction.
*64254
css代码:
/row的样式/
main .row {
height: auto;
min-height: 5.5em;
border: solid;
border-width: 1px;
border-color: #f5f5f5;
background-color: #ffffff;
}
main .row:hover {
background-color:#f5f5f5 ;
}
/将head设置为float/
main .row .head {
display: inline;
float: left;
width: 10em;
min-width: 10em;
padding-top: 0em;
margin-left: 2em;
}
/当内容比较多时,会乱行,加上左边距就不会了,但也存在问题,这样加完之后,无论浏览器怎么缩小,都不是自动的换行,如果不加的话,是可以随着浏览器的大小自动换行的/
span p {
padding-left: 12em;
}
/和上面那个span p是一个理由/
.count {
margin-top: 0em;
padding-left: 12em;
padding-top: 0em;
}