2カラムの表現方法

float

親要素

.float__left{ float: left; }




.float__right{ float: right; }


floatはレイアウト崩れが起きやすいので取り扱う時は注意が必要です。


float__left 1




float__left 2


float__left




float__right


float__right 1




float__right 2


float__left 1




float__left 2




float__left 3




clearfixと呼ばれる手法を使うと、floatした要素を親要素内に綺麗に収めることが出来ます。

.cf::after{
  content: "";
  display: block;
  clear: both;
}

table

親要素

.table{
 display: table;
 width: 1000px;
 background-color: #666666;
 margin: 10px AUTO;
}
.table__child{
 display: table-cell;
 background-color: #ffffff;
 padding: 15px;
 border: 1px solid #000000;
}
table__child
table__child
table__child
table__child
table__child
table__child

flex-box

親要素

.flex{
 width: 100%;
 display: -webkit-box;
 display: -webkit-flex;
 display: -moz-box;
 display: -ms-flexbox;
 display: flex;
 flex-wrap: wrap;
 justify-content: start;
}
.flex::after{
 content: "";
 display: block;
 clear: both;
 width: 100%;
}
.flex__2clmn{
 width: calc(50% - 20px);
 padding: 0px;
 margin: 10px;
 align-content: stretch;
 box-sizing: border-box;
}
flxbox__2clmn