마지막으로 scienceRightWrap 오른쪽 서랍장은 scienceLeftWrap 왼쪽 서랍장을 작업한 방식과 동일하게 진행합니다. 중앙 서랍장과 같은 선상에 위치하도록 float: right;을 적용하고 비커 이미지를 삽입한 다음 설명 글을 디자인합니다.
예제 소스 Exercise/14장/KidsGao/css/style.css
#science .scienceWrap .scienceRightWrap { float: right; /* 오른쪽 서랍장을 중앙 서랍장과 나란히 배치하기 위해 float: right;을 적용합니다. */ } #science .scienceWrap .scienceRightWrap .water { width: 204px; height: 191px; background-image: url(../img/science/water.png); /* 비커 이미지를 삽입합니다. */ margin-bottom: 130px; /* 비커 하단에 130px만큼 공백을 설정합니다. */ } #science .scienceWrap .scienceRightWrap p { color: #8E7577; font-size: 18px; line-height: 26px; / 오른쪽 서랍장 안에 들어갈 설명 글의 위아래 간격을 26*px로 조정합니다. */ padding-top: 10px; }