<p>1. overflow: hidden</p>
<div class="parent first">
<div class="child">1</div>
<div class="child">2</div>
</div>
<p>2. border</p>
<div class="parent second">
<div class="child">1</div>
<div class="child">2</div>
</div>
<p>3. inline-block: parent</p>
<div class="parent third">
<div class="child">1</div>
<div class="child">2</div>
</div>
<p>4. inline-block: child</p>
<div class="parent fourth">
<div class="child">1</div>
<div class="child">2</div>
</div>
.child {
/* display: inline-block; */
/* overflow: hidden; */
/* border: 1px solid black; */
width: 100px;
height: 100px;
color: #fff;
text-align: center;
line-height: 100px;
font-size: 2rem;
margin: 20px;
}
.child:first-child {
background-color: royalblue;
}
.child:last-child {
background-color: gold;
}
.parent {
width: 140px;
background-color: grey;
}
.first {
overflow: hidden;
}
.second {
border: 1px solid transparent;
}
.third {
display: inline-block;
}
.fourth > .child {
display: inline-block;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.