div布局系列 - 两端对齐的方法_div文字两端对齐

方式一：box-sizing:border-box
html代码部分

<div class="content clear-fix">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
1
2
3
4
5
6
7
8
9
10
11
12

css样式部分

    <style type="text/css">
        .content{
            width: 1080px;
            min-height: 400px;
            border: 1px solid #ccc;
            margin: 10px auto;
            padding: 6px;
        }
        .clear-fix:after{
            content: '';
            display: block;
            clear: both;
        }
        .content>div{
            width: 200px;
            min-height: 230px;
            border: 1px solid #963;
            float: left;
            margin-right: 20px;
            margin-bottom: 10px;
            box-sizing: border-box;
        }
        .content>div:nth-child(5n){
            margin-right: 0px;
        }
    </style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26