채택완료
아래의 그림과 같은 구조로 div 코딩을 할건데 잘안되는 부분이 있어 질문 올립니다.
<ul>
<li>
<img src="img01">
<img src="img02">
</li>
<li>
<img src="img03">
<img src="img04">
</li>
<li>
<img src="img05">
</li>
</ul>
이렇게 있을때 float 과 clear를 어떻게 줘야 저런 그림으로 나오는지 한창 소스를 연구하다가 답이 안나와 질문 올립니다.
|
답변 2개
채택된 답변
+20 포인트
port443
2015-03-31 (화) 17:47:21
css display 를 table 로 하면 조금 더 편해지실 것입니다.
2015-04-01 (수) 16:06:28
<body>
<style>
.box {width:1200px; height:300px; vertical-align:middle; border:1px solid #03F;}
ul {float:left; border:1px solid #F99; margin:20px 0px 0 10px;}
li {list-style:none;}
</style>
<div class="box">
<ul>
<li><img src="../images/test/1.jpg" ></li>
<li><img src="../images/test/2.jpg"></li>
</ul>
<ul>
<li><img src="../images/test/3.jpg" ></li>
<li><img src="../images/test/4.gif"></li>
</ul>
<ul>
<li><img src="../images/test/5.jpg" ></li>
</ul>
</div>
</body>
답변을 작성하려면 로그인이 필요합니다.