WEB/CSS
[CSS] display, float ์ฌ์ฉํ์ฌ ์ฌ๋ฐฑ ์ง์ฐ๊ธฐ
developer of the night sky
2023. 9. 26. 16:31
๐ป์ฌ๋ฐฑ ์ง์ฐ๊ธฐ๐ป
<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>