多列等分篇

 

　　　　1.float

html：

<div class="container">
    <div id="one" class="content">one</div>
    <div id="two" class="content">two</div>
    <div id="three" class="content">three</div>
    <div id="four" class="content">four</div>
</div>

css：

.containert{margin-left:-20px}
.content{float:left;width:25%;padding-left:20px;box-sizing:border-box;}

　　

效果图：

 

 　　　　2.table

html:

<div class="container-fix">
	<div class="container">
    	        <div class="content">one</div>
    	        <div class="content">two</div>
    	        <div class="content">three</div>
        	<div class="content">four</div>
	</div>
</div>    

　　css:

.container-fix{margin-left:-20px;}
.container{display:table;table-layout:fixed;width:100%;}
.content{display:table-cell;padding-left:20px;}

　　效果图：

 

 　　　　3.flex

html:

<div class="container">
    	<div class="content">one</div>
    	<div class="content">two</div>
    	<div class="content">three</div>
    	<div class="content">four</div>
</div>

　　css:

.container{display:flex;}
.content{flex:1;}
.content+.content{margin-left:20px;}

　　

效果图：

 

 

 

 

 

html：