<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.list {
width: 800px;
margin: 0 auto;
border: 1px solid #777;
}
.list .inner {
float: left;
width: 25.0000%;
border: 1px solid #777;
box-sizing: border-box;
}
.content {
overflow: hidden;
}
.left {
float: left;
}
.right {
float: right;
font-weight: 800;
}
.left span {
display: block;
}
</style>
</head>
<body>
<div class="list">
<div class="inner">
<img src="img/bgimg.png" alt="베너">
<div class="content"><!-- overflow -->
<div class="left"><!-- left -->
<span>왼</span>
<span>왼</span>
<span>왼</span>
</div>
<div class="right"><!-- right -->
오른쪽
</div>
<div style="clear:both;"><!-- float해제 -->
탑쌓기해제
</div>
<div>플롯의 영향을 받지 않음</div>
</div>
<!-- <div>탑쌓기 해제</div> -->
</div>
<div class="inner">
<img src="img/bgimg.png" alt="베너">
<div class="content"><!-- overflow -->
<div class="left"><!-- left -->
<span>왼</span>
<span>왼</span>
<span>왼</span>
</div>
<div class="right"><!-- right -->
오른쪽
</div>
<div style="clear:both;"><!-- float해제 -->
탑쌓기해제
</div>
<div>플롯의 영향을 받지 않음</div>
</div>
<!-- <div>탑쌓기 해제</div> -->
</div>
<div class="inner">
<img src="img/bgimg.png" alt="베너">
<div class="content"><!-- overflow -->
<div class="left"><!-- left -->
<span>왼</span>
<span>왼</span>
<span>왼</span>
</div>
<div class="right"><!-- right -->
오른쪽
</div>
<div style="clear:both;"><!-- float해제 -->
탑쌓기해제
</div>
<div>플롯의 영향을 받지 않음</div>
</div>
<!-- <div>탑쌓기 해제</div> -->
</div>
<div class="inner">
<img src="img/bgimg.png" alt="베너">
<div class="content"><!-- overflow -->
<div class="left"><!-- left -->
<span>왼</span>
<span>왼</span>
<span>왼</span>
</div>
<div class="right"><!-- right -->
오른쪽
</div>
<div style="clear:both;"><!-- float해제 -->
탑쌓기해제
</div>
<div>플롯의 영향을 받지 않음</div>
</div>
<!-- <div>탑쌓기 해제</div> -->
</div>
</div>
</body>
</html>
여기서는 div나누는 것에 주목할 것. 어디에 어떻게 들어가는지, float을 쓰기 위해 부모div가 자식div를 어떻게 감싸는지를 확인
float에서 벗어나려면 태그에 style="clear:both;"를 넣으면 그 아래서부터는 float가 해제된다.
'HTML·CSS' 카테고리의 다른 글
| 221221 HTML CSS 플롯 실습2 (0) | 2022.12.21 |
|---|---|
| 221221 HTML CSS 플롯 실습 (0) | 2022.12.21 |
| 221221 HTML CSS float (0) | 2022.12.21 |
| 221221 HTML CSS 패딩마진 실습 (0) | 2022.12.21 |
| 221221 HTML CSS 패딩마진 버튼 (0) | 2022.12.21 |
