Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
​
​
<body>
<section class="sec">
<div class="b1">1</div>
<div class="b2">2</div>
<div class="b3">3</div>
<div class="b4">4</div>
</section>
<br>
<p> а если с флоатом</p>  
<section class="isec">
    <div class="ib1">1</div>
    <div class="ib2">2</div>
    <div class="ib4">4</div>
    <div class="ib3">3</div>
    
    </section>
 <br> 
  <p> а если с флоатом? 2 выше, чем 1 </p>  
<section class="isec">
    <div class="ib1">1</div>
    <div class="ib2" style="height: 200px">2. 2 выше, чем 1</div>
    <div class="ib4">4</div>
    <div class="ib3">3</div>
    
    </section>
</body>
 
     .sec {
        display: flex;
        flex-wrap: wrap;
    }
​
.isec:after {
  content:'';
  clear: both;
  display: block;
}
​
    .b1,
    .b3,
    .ib1,
    .ib3 {
        background: red;
        width: calc(60% - 2px);
        border: 1px solid white;
        align-items: flex-start;
    }
​
    .ib2,
    .ib4,
    .b2,
    .b4 {
        background: green;
        width: calc(40% - 2px);
        align-items: flex-start;
        border: 1px solid white;
    }
​
    .ib1, .b1 {
        height: 100px;
    }
​
    .ib3, .b3 {
        height: 60px;
    }
​
    .ib4, .b2 {
        height: 40px;
    }
​
    .ib4, .b4 {
        height: 40px;
    }
​
    .ib1, .ib3 {float: left;}
    .ib2, .ib4 {float: right;}
​
.ib1{height: 3000px}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
alexandr2006pro
0viewers