CSS Battle 1 carrom

황상진·2022년 8월 3일
0

CSS-Battle

목록 보기
9/10

CSS Battle 1 carrom

<div class="con">
  <div class="box"></div>
  <div class="box"></div>
</div>
<div class="con">
	<div class="box"></div>
  <div class="box"></div>
</div>
<style>
  body{
    background:#62374e;
  }
  .con{
    display:flex;
    margin-top:50px;
    margin-left:42px;
    margin-bottom:100px;
  }
  .box{
    background:#fdc57b;
    width:50px;
    height:50px;
  }
  .box:nth-child(2){
    margin-left:200px;
  }
</style>
  • container의 display를 flex로 하여 box div 두개를 한줄에 넣도록
  • 2번째 자식 박스만 따로 선택하여 margin-left를 하였다.
profile
Web FrontEnd Developer

0개의 댓글