均等分item效果浮动布局代码效果

块级元素的宽度=内容宽度+border+padding+margin

	.demo {
      width: 990px;
      height: 500px;
      border: 1px solid #000;
      margin: 0 auto;
    }
    .father {
      margin-right: -10px;
    }
    .son {
      margin-right: 10px;
      float: left;
      width: 190px;
      height: 100px;
      background-color: red;
    }

<body>
  <div class="demo">
    <div class="father">
      <div class="son">文字内容01</div>
      <div class="son">文字内容02</div>
      <div class="son">文字内容03</div>
      <div class="son">文字内容04</div>
      <div class="son">文字内容05</div>
      <div class="son">文字内容06</div>
      <div class="son">文字内容07</div>
      <div class="son">文字内容08</div>
      <div class="son">文字内容09</div>
      <div class="son">文字内容10</div>
    </div>
  </div>
</body>

效果

浮动布局

代码

	* {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .wrap {
      width: 1000px;
      height: 500px;
      background-color: red;
      margin: 20px auto;
    }

    .wrap * {
      float: left;
    }

    .big {
      margin-top: 20px;
      margin-right: 10px;
      width: 290px;
      height: 460px;
      background-color: yellow;
    }

    .tem {
      margin-right: -10px;
    }

    .small {
      margin-top: 20px;
      margin-right: 10px;
      width: 195px;
      height: 220px;
      background-color: blue;
    }
    
    <body>
      <div class="wrap">
        <div class="tem">
          <div class="big">big1</div>
          <div class="big">big2</div>
          <div class="small">small1</div>
          <div class="small">small2</div>
          <div class="small">small3</div>
          <div class="small">small4</div>
        </div>
      </div>
	</body>

效果