웹표준,웹접근성(html, html5, css, css3, javascript, jQuery, jQueryMobile, snecha, senchaTouch, php, mobileWebApp)
float 제어 본문
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>float 제어</title>
<!--
float가 적용되어 일반흐름을 벗어난 자식요소를
부모요소로 하여금 감싸게 하는 4가지 방법
부모 height: 0px
자식 (float)
자식 (float)
1. 부모도 띄워라! (float)
2. 줄바꿈 요소를 추가해서 클리어<br style="clear: both;">
3. overflow: hidden; [hidden | auto | scroll]
4. clearfix 사용.
-->
<style type="text/css">
.fl { float: left; }
.fr { float: right; }
.parent {
width: 600px;
margin: 100px auto;
background: #2c7c95;
color: #fff;
}
.child {
width: 50%;
}
.child:first-child {
background: #ff5c36;
}
.child:last-child {
background: #dc086f;
}
.clearfix:after, .clearfix::after {
content: '';
display: block;
clear: both;
}
/* Cross Browsing */
.ie6 .clearfix { height: 1%; }
.ie7 .clearfix { overflow: hidden; }
</style>
<!--[if lt IE 8]><script src="js/IE9.js"></script><![endif]-->
</head>
<body>
<div class="parent clearfix">
<div class="child fl">child</div>
<div class="child fr">child</div>
</div>
</body>
</html>
'css' 카테고리의 다른 글
| ul, li 의 가운데 정렬 (0) | 2012.05.04 |
|---|---|
| nth-child 몇 번째 자식요소 (0) | 2011.11.11 |
| 플로팅 디자인의 특징 (0) | 2011.11.11 |
| 플로팅된 자식요소를 감싸 안으려면?</ (0) | 2011.11.11 |
| 화면 표시 모듈 - display (0) | 2011.11.11 |