<ul class="container">
    <li class="item">1</li>
    <li class="item">2</li>
    <li class="item right">right</li>
    <li class="item">3</li>
    <li class="item">4</li>
    <li class="item">5</li>
    <li class="item">6</li>
    <li class="item">7</li>
    <li class="item">8</li>
    <li class="item">9</li>
    <li class="item">10</li>
    <li class="item">11</li>
    <li class="item left">left</li>
</ul>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }
  
  .container {
  width: 800px;
  margin: 0 auto;
  font-size: 0;
  }
  
  .item {
  display: inline-block;
  width: calc(100% / 4);
  height: 200px;

  font-size: 2rem;
  text-align: center;
  color: #fff;

  background: #0000FF;
  border: 1px solid #FF0000;
  }
  
  .right {
  float: right;
  width: calc(100% / 2);
  
  background: #ff0000;
  }
  
  .left {
  float: left;
  width: calc(100% / 4 * 3);

  background: #67268b;
  }