markdown HTML&css_layout_1-2_box_side由端

Posted 2021-05-05

.box {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
   box-sizing: border-box;
  
  height: 50px;
  background-color: pink;
  border: solid red 1px;
}

.boxA .box {
    background-color: yellow;
}


.box_1-2-3 {
  .box2, .box3 {
    float: left;
  }
}

.box_1-2-4 {
  .boxA:after {
    // clearfix
    content: "";
    display: block;
    clear: both;
  }
  .box2, .box3 {
    float: left;
  }
}

.box_1-2-5 {
  .boxA:after {
    // clearfix
    content: ""; 
    display: block;
    clear: both;
  }
  .box2, .box3 {
    float: left;
    width: 50%;
  }
}

<h2>基本</h2>
<div class="box box1">
  BOX1
</div>
<div class="box box2">
  BOX2
</div>
<div class="box box3">
  BOX3
</div>
<div class="box box4">
  BOX4
</div>

<h2>1-2-2: ボックスをグループ化</h2>
<div class="box_1-2-2">
  <div class="box box1">
    BOX1
  </div>
  <div class="boxA">
    <div class="box box2">
      BOX2
    </div>
   <div class="box box3">
      BOX3
    </div>
  </div>

  <div class="box box4">
    BOX4
  </div>
</div>

<h2>1-2-3: ボックスを横並び</h2>
<div class="box_1-2-3">
  <div class="box box1">
    BOX1
  </div>
  <div class="boxA">
    <div class="box box2">
      BOX2
    </div>
   <div class="box box3">
      BOX3
    </div>
  </div>

  <div class="box box4">
    BOX4
  </div>
</div>

<h2>1-2-4: 後ろに入り込まないようにする</h2>
<div class="box_1-2-4">
  <div class="box box1">
    BOX1
  </div>
  <div class="boxA">
    <div class="box box2">
      BOX2
    </div>
   <div class="box box3">
      BOX3
    </div>
  </div>

  <div class="box box4">
    BOX4
  </div>
</div>

<h2>1-2-5: ボックスの横幅指定</h2>
<div class="box_1-2-5">
  <div class="box box1">
    BOX1
  </div>
  <div class="boxA">
    <div class="box box2">
      BOX2
    </div>
   <div class="box box3">
      BOX3
    </div>
  </div>

  <div class="box box4">
    BOX4
  </div>
</div>

html&css_layout_1-2_box_side-by-side
------------------------------------


A [Pen](https://codepen.io/m-shinkawa/pen/ERqLpg) by [m-shinkawa](https://codepen.io/m-shinkawa) on [CodePen](https://codepen.io).

[License](https://codepen.io/m-shinkawa/pen/ERqLpg/license).