웹표준,웹접근성(html, html5, css, css3, javascript, jQuery, jQueryMobile, snecha, senchaTouch, php, mobileWebApp)
플로팅된 자식요소를 감싸 안으려면?</ 본문
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>플로팅된 자식요소를 감싸 안으려면?</title>
<style type="text/css">
.wrapper {
width: 700px;
background: #489300;
color: black;
/* float: left; */
/* overflow: hidden; */
}
.wrapper::after {
display: block;
content: '';
clear: both;
}
.wrapper p {
float: left;
margin-right: 1.5%;
width: 30%;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="wrapper">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
<p>Sed adipiscing ornare risus. Morbi est est, blandit sit amet, sagittis vel, euismod vel, velit. Pellentesque egestas sem. Suspendisse commodo ullamcorper magna.</p>
<!-- <br class="clear"> -->
</div>
</body>
</html>
'css' 카테고리의 다른 글
| float 제어 (0) | 2011.11.11 |
|---|---|
| 플로팅 디자인의 특징 (0) | 2011.11.11 |
| 화면 표시 모듈 - display (0) | 2011.11.11 |
| out-line (0) | 2011.11.11 |
| min,max height (0) | 2011.11.11 |