Как создать столбцы, которые плавают рядом друг с другом в css

Question

Я создал следующий css код для создания трех одинаковых столбцов, которые плавают рядом друг с другом.

.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  height: 100px; 
}

Теперь мне нужно создать 1-й столбец с 20% и два других с размерами шириной 40% тогда как я могу сделать это с css?

Answer 1

Не используйте float, вместо этого используйте flex так:

.cover {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-wrap: wrap;
}

.item {
  height: 100px;
}

.item1 {
  width: 20%;
  background-color: blue;
}

.item2 {
  background-color: red;
}

.item.item3 {
  width: 40%;
  background-color: green;
}

<div class="cover">
  <div class="item item1"></div>
  <div class="item item1 item2"></div>
  <div class="item item3"></div>
</div>