1. ul, li를 활용한 레이아웃
2. float:left 의 활용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
ul, li{margin:0; padding:0; list-style-type:none;}
/*전체범위*/
.content{border: 1px solid #ccc; width:600px; margin:0 auto; overflow:auto;}
#leftDiv, #rightDiv, #leftDiv>ul>li, #bottomDiv>ul>li{float:left;}
/*상단 왼쪽 테스트*/
#leftDiv>ul>li{
width:173px; margin:10px; border:1px solid #ddd; background:#eee;
height:140px;
}
.txt-cyan{
color:red;
}
/*상단왼쪽 홀수번째*/
#leftDiv{width: 400px; height:322px; background:yellow; margin:0 auto;}
#leftDiv>ul>li>ul>li{font-size:14px;}
#leftDiv>ul>li>ul>li:nth-child(2n){
width:150px;
}
#rightDiv{width: 170px; height:322px; border: 1px solid #eee; background: red; margin-left: 10px; }
ul li{font-size:12px;}
#bottomDiv>ul>li img{width:180px; height:100px; }
#bottomDiv>ul>li{margin:10px;}
/*하단*/
</style>
</head>
<body>
<!-- 전체 div, 블록 단위로 나눠준다. + 프로그래밍에서는 반복문으로 돌린다! -->
<div class="content">
<div>
<!-- 위 왼쪽 -->
<div id="leftDiv">
<ul>
<li>
<ul>
<li class="txt-cyan">Q</li>
<li>헐리우드 영화에서 러시인이 주로 악당으로...</li>
<li>A</li>
<li>
냉전시대의 산물입니다. 러이사는 미국의 오랜 숙명으로.....
</li>
</ul>
</li>
<li>
<ul>
<li class="txt-cyan">Q</li>
<li>
전자기기는 좋은거 사야 하나요?
</li>
<li>A</li>
<li>
직접 써보시면 답 나옵니다.
</li>
</ul>
</li>
<li>
<ul>
<li class="txt-cyan">Q</li>
<li>'독도'이름의 유래를 알려주세요.</li>
<li>A</li>
<li>
독도와 관련된 명칭은 시대에 따라 문헌에 아주 다양하게 나옵니다.
</li>
</ul>
</li>
<li>
<ul>
<li class="txt-cyan">Q</li>
<li>
코카콜라는 당뇨환자에게 해로운건가요?
</li>
<li>A</li>
<li>
코카콜라는 마이 먹으면 기분이 좋아집니다. 근데 이 다뿌러짐요
</li>
</ul>
</li>
</ul>
</div>
<!-- 위 오른쪽 -->
<div id="rightDiv"><img src = ""/></div>
</div>
<!-- 아래쪽 -->
<div id="bottomDiv">
<ul>
<li>
<img src="" /> <br />
견과류의 하루 적정 섭취량 <br />
견과류
</li>
<li>
<img src="" /> <br />
날벌레가 빛에 몰려드는 이유 <br />
곤충
</li>
<li>
<img src="" /> <br />
낸면의 유래와 역사 <br />
음식
</li>
</ul>
</div>
</div>
</body>
</html>결과
풀스택eDot