Issue
The inner div
does not appear to contain (enclose) its span
element children when inspected using dev tools. From what I've learned, a div
automatically inherits the size (height and width) of the content inside that div
, but in this case it's not happening. Why not? Is it something to do with the span
elements?
:root {
--side_length: 200px;
--dot_ratio: 0.15;
}
.dice {
position: relative;
margin: 0;
perspective: 1000px;
perspective-origin: 50% 100%;
}
.dot {
background: #FFF;
height: calc(var(--side_length) * var(--dot_ratio));
width: calc(var(--side_length) * var(--dot_ratio));
border-radius: 50%;
display: inline-block;
}
.dot1 {
position: absolute;
}
.dot2 {
position: absolute;
left: calc((var(--side_length) - (var(--side_length) * var(--dot_ratio))) * 0.5);
}
.dot3 {
position: absolute;
left: calc(var(--side_length) - (var(--side_length) * var(--dot_ratio)));
}
.dot4 {
position: absolute;
top: calc((var(--side_length) - (var(--side_length) * var(--dot_ratio))) * 0.5);
}
.dot5 {
/* (side_length - height) / 2 */
position: absolute;
top: calc((var(--side_length) - (var(--side_length) * var(--dot_ratio))) * 0.5);
left: calc((var(--side_length) - (var(--side_length) * var(--dot_ratio))) * 0.5);
}
.dot6 {
position: absolute;
top: calc((var(--side_length) - (var(--side_length) * var(--dot_ratio))) * 0.5);
left: calc(var(--side_length) - (var(--side_length) * var(--dot_ratio)));
}
.dot7 {
position: absolute;
top: calc(var(--side_length) - (var(--side_length) * var(--dot_ratio)));
}
.dot8 {
position: absolute;
top: calc(var(--side_length) - (var(--side_length) * var(--dot_ratio)));
left: calc((var(--side_length) - (var(--side_length) * var(--dot_ratio))) * 0.5);
}
.dot9 {
position: absolute;
top: calc(var(--side_length) - (var(--side_length) * var(--dot_ratio)));
left: calc(var(--side_length) - (var(--side_length) * var(--dot_ratio)));
}
.face {
height: var(--side_length);
width: var(--side_length);
margin: 0;
background: #000;
}
<div class="face">
<div style="position: absolute;">
<span class="dot dot1"></span>
<span class="dot dot2"></span>
<span class="dot dot3"></span>
<span class="dot dot4"></span>
<span class="dot dot5"></span>
<span class="dot dot6"></span>
<span class="dot dot7"></span>
<span class="dot dot8"></span>
<span class="dot dot9"></span>
</div>
</div>
Solution
See: https://developer.mozilla.org/en-US/docs/Web/CSS/position
In particular, it says:
position: absolute
-- The element is removed from the normal document flow, and no space is created for the element in the page layout.
If you change <span>
to <p>
, you will see the same problem. Put a coloured border on the inner div to see where it appears.
Using position: absolute
to position each element individually is a very complicated way to approach this problem.
I would suggest using flexbox (you could also use gridbox).
Add a container class to the inner div. I added a red border to it so that you can see that the inner container div
expands to surround the <span>
children, i.e. the white circles.
There are many ways to position the circles.
For example:
:root {
--side_length: 200px;
--dot_ratio: 0.15;
}
.dice {
position: relative;
margin: 0;
perspective: 1000px;
perspective-origin: 50% 100%;
}
.dot {
background: #FFF;
height: calc(var(--side_length) * var(--dot_ratio));
width: calc(var(--side_length) * var(--dot_ratio));
border-radius: 50%;
margin: 17px;
}
.sub-face {
position: absolute;
}
.face {
height: var(--side_length);
width: var(--side_length);
margin: 0;
background: #000;
}
.container {
border: solid 3px red;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
<div class="face">
<div class="container">
<span class = "dot"></span>
<span class = "dot"></span>
<span class = "dot"></span>
<span class = "dot"></span>
<span class = "dot"></span>
<span class = "dot"></span>
<span class = "dot"></span>
<span class = "dot"></span>
<span class = "dot"></span>
</div>
</div>
Answered By - PeterJames
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.