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">
  <title>JS Bin</title>
</head>
<body>
  <div class="container">
    <h2>С классом .row (<small>чтобы не было промежутков у первой и послдней колонок</small>)</h2>
    <div class="row">
      <div class="col-6">Шон Леви, удачно показывавший себя и в комедии, и в экшне, продемонстрирует наработанные в двух жанрах навыки и возьмется за постановку приключенческого проекта «Сорок разбойников», основанного на популярной восточной сказке об Али-Бабе. На главную роль в картине студии 20th Century Fox претендуют Лиам Хемсворт, Дэн Стивенс и Эван Питерс.</div>
      <div class="col-6">Сразу два проекта из киновселенной DC напомнили о себе на этой неделе. Студия Warner рассматривает Джая Кортни на роль Дэдшота в «Отряде самоубийц», а также определяется с постановщиком грядущей «Чудо-женщины». В качестве фаворита имеется в виду Мишель МакЛарен, ответственная за «Игру престолов» и «Во все тяжкие».</div>
    </div>
    
    <h2>Без класса .row</h2>
​
      <div class="col-6">Шон Леви, удачно показывавший себя и в комедии, и в экшне, продемонстрирует наработанные в двух жанрах навыки и возьмется за постановку приключенческого проекта «Сорок разбойников», основанного на популярной восточной сказке об Али-Бабе. На главную роль в картине студии 20th Century Fox претендуют Лиам Хемсворт, Дэн Стивенс и Эван Питерс.</div>
      <div class="col-6">Сразу два проекта из киновселенной DC напомнили о себе на этой неделе. Студия Warner рассматривает Джая Кортни на роль Дэдшота в «Отряде самоубийц», а также определяется с постановщиком грядущей «Чудо-женщины». В качестве фаворита имеется в виду Мишель МакЛарен, ответственная за «Игру престолов» и «Во все тяжкие».</div>
​
  </div>
</body>
</html>
 
body {
  margin: 0;
}
.container {
  width: 600px;
  margin: auto;
  background-color: #CEF495;
  overflow: hidden;
}
​
.row {
  margin: 0 -15px;
}
​
.row:before,
.row:after {
  content: " ";
  display: table;
  width: 100%;
}
.row:after {
  clear: both;
}
​
.col-6 {
  padding: 0 15px;
  float: left;
  width: 50%;
  background-color: #CCE2FC;
  -webkit-background-clip: content-box;
  background-clip: content-box ;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
Output

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

Dismiss x
public
Bin info
corvus-007pro
0viewers