Float
개요 : 이 속성은 요소가 흐를(float) 방향을 지정한다.
주로 글자가 이미지 주변을 흐르도록 이미지에 사용되지만, 배치나 정렬 등 레이아웃을 구성하기 위해서 모든 요소에 사용될 수 있다.
정의
|
float |
설명 |
|
값 |
left | right | none | inherit |
|
기본값 |
none |
|
적용대상 |
위치된 요소와 생성된 내용을 제외한 모든 요소 |
|
상속 |
안됨 |
|
백분율 |
사용 불가 |
|
미디어 |
visual |
값
|
값 |
설명 |
|
left |
왼쪽으로 흐르는 블럭 박스로 지정한다. 뒤 따르는 요소는 박스의 오른쪽 면을 따라서 흐른다. 값이 'none'이 아니면 'display'는 무시 된다. |
|
right |
오른쪽으로 흐르는 블럭 박스로 지정한다. 뒤 따르는 요소는 박스의 왼쪽 면을 따라서 흐른다. 값이 'none' 아니면 'display'는 무시 된다. |
|
none |
흐르지 않도록 지정한다. |
|
inherit |
부모 요소의 값을 상속하도록 지정한다. |
-----------------------------------------------------------------------------------------------------------------------------------------
예제
View Source :
<html>
<head>
<style type="text/css">
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
</style>
</head>
<body>
<h3>Image Gallery</h3>
<p>Try resizing the window to see what happens when the images does not have enough room.</p>
<img class="thumbnail" src="klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">
<img class="thumbnail" src="klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">
</body>
</html>
Result :
#1.
#2.
''.' Programs > CSS' 카테고리의 다른 글
| Clip (0) | 2012.03.20 |
|---|---|
| Overflow (0) | 2012.03.20 |
| Clear (0) | 2012.03.20 |
| Font-Family (0) | 2012.03.20 |
| Font-Weight (0) | 2012.03.20 |