전 회사 여직원 한테서 갑자기 카톡이 날라온다..
그녀: 팀장님 이거 어떻게 등간격으로 정렬해요?ㅠㅠ
나: 한줄에 몇개씩 넣으면됨?
그녀: 8개요
나: 그럼 DIV로 싸고 CSS로 정렬해~ 정렬할때 width를 100/8 = 12.5 니까 12.5%씩 하고
그녀: 몰겠음요ㅠ
그래서 예제 하나 만들어서 보내줌
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style>
.single {
width: 12.5%;
height: 20px;
border: solid 1px #ccc;
display: inline-block;
}
.wrapper {
width: 300px;
}
</style>
<body>
<div class="wrapper">
<div class="single">
</div>
<div class="single">
</div>
<div class="single">
</div>
<div class="single">
</div>
<div class="single">
</div>
<div class="single">
</div>
<div class="single">
</div>
<div class="single">
</div>
<div class="single">
</div>
<div class="single">
</div>
<div class="single">
</div>
<div class="single">
</div>
<div class="single">
</div>
<div class="single">
</div>
<div class="single">
</div>
<div class="single">
</div>
<div class="single">
</div>
<div class="single">
</div>
<div class="single">
</div>
<div class="single">
</div>
<div class="single">
</div>
<div class="single">
</div>
<div class="single">
</div>
<div class="single">
</div>
</div>
</body>
</html>
결과화면
이코드의 핵심은 div의
display:inline-block
끗.
댓글