๐ป์ฌ๋ฐฑ ์ง์ฐ๊ธฐ๐ป
<body>
<h1>์ฝํ
์ธ </h1>
<div id="list">
<div id="box1" class="box">์์1</div>
<div id="box2" class="box">์์2</div>
<div id="box3" class="box">์์3</div>
</div>
<h3>๋ ๋ค๋ฅธ ๋ด์ฉ</h3>
</body> <style>
#list .box {
border: 1px solid black;
width: 100px;
height: 100px;
display: inline-block;
}
</style>
1. display์ font-size ์ฌ์ฉ
<style>
#list {
font-size: 0px;
}
#list .box {
border: 1px solid black;
width: 100px;
height: 100px;
display: inline-block;
font-size: 1rem;
}
</style>
2. float ํ์ฉ
<style>
#list .box {
border: 1px solid black;
width: 100px;
height: 100px;
float: left;
}
#list::after {
content: '';
display: block;
clear: both;
}
</style>
'WEB > CSS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [CSS] ์์์ ํ ๋๋ฆฌ ๋ฅ๊ธ๊ธฐ : border-radius (0) | 2023.09.26 |
|---|---|
| [CSS] ํ ์คํธ ๊ทธ๋ฆผ์, ์์ ๊ทธ๋ฆผ์ : text/box-shadow (0) | 2023.09.26 |
| [CSS] ์์์ ์/๋ค์ ์ถ๊ฐ ๋ด์ฉ ์์ฑ : ์ ํ์ ํ์ (0) | 2023.09.26 |
| [CSS] ํน์ ํ ์์ฑ์ ๊ฐ์ง ์์๋ค์ ์ ํ : ์์ฑ ์ ํ์ (0) | 2023.09.26 |
| [CSS] ์์ ์ ํ : ๊ฐ์ํด๋์ค (0) | 2023.09.26 |
