My personal style:
.Content > div {
display: inline-block;
vertical-align: top;
box-sizing: border-box;
width: 33%;
height: 100%;
white-space: nowrap;
overflow: hidden;
}
I am encountering an issue where only the first children of .Content
are meant to be "no wrappable". However, all divs inside the first children are also affected. This is not the desired outcome. Is there a solution to this problem?
Edit
The HTML structure is as follows:
<div class="Content">
<div class="left">
<div></div>
<div></div>
<div></div>
</div>
<div class="center1">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="center2">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="right">
<div></div>
<div></div>
<div></div>
</div>
</div>
Therefore, I aim for only .left
, .center1
, .center2
, .right
divs to be styled as "no wrappable" within the .Content
div.