A Pen by yehuda.

index.html

  <div class="wrap0">
    <div class="wrap1">wrap1</div>
    <div class="wrap2">wrap2</div>
    <div class="wrap3">
      <div class="wrap3_1">wrap3_1</div>
      <img class="wrap3_2">
    </div>
  </div>

style.scss

@import "compass/css3";
@import "compass/reset";
@import "compass/utilities/general/clearfix";
@import "compass/css3/border-radius";

$color: #778899;
$width: 100px;
$border_width: 10px;
$border_radius: 50%;

body{
  background-color: $color;
}

.wrap0{
  width: 960px;
  margin: 10px auto;
  padding: 20px 0;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  color: #fff;
  background-color: lighten($color,5%);
  border: 1px solid darken($color,20%);
  @include pie-clearfix;
  .wrap1,.wrap2{
    width: $width;
    height: $width/2;
    line-height: $width/2;
    background-color: lighten($color,10%);
  }
  .wrap1{
    float: left;
  }
  .wrap2{
    float: right;
  }
  .wrap3{
    padding: 20px 30px 0;
    @include pie-clearfix;
    .wrap3_1{
      float: left;
      width: $width*2;
      height: $width*2;
      line-height: $width*2;
      border: 1px solid darken($color,10%);
    }
    .wrap3_2{
      float: right;
      width: $width*2 - $border_width*2;
      height: $width*2 - $border_width*2;
      border: $border_width solid darken($color,10%);
      @include border-radius($border_radius);
    }
  }
}

Отмена-обтекания.markdown

Отмена обтекания

A Pen by yehuda on CodePen.

License.