- This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
Viewing 9 posts - 1 through 9 (of 9 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Hi!
I have a next HTML-code:
and CSS-code for this:
.smi { height: 19.4%; }
.border { float: left; height: 100%; }
.bmid { width: 0;
overflow: hidden;
display: inline-block;
background: url(‘/img/mid.png’) no-repeat center;
background-size: 100% 100%; }
.bmid_anim { animation-name: smMiddleOn;
animation-timing-function: ease;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-fill-mode: forwards; }
@keyframes smMiddleOn { 100% { width: auto; } }
And of course it doesn’t work because “width: auto; ”
But I have a several “smi” divs with different texts.
How I can make dynamic middle div?
A Codepen.io demo would be useful here.
Use max-width
instead as you cannot animate auto
width
Thanks a lot!
Using max-width instead width solved the problem.
Amazing :)
Hi!
I’ve got another problem.
What’s goes wrong when I’m add a paddings left and right side?
:(
https://codepen.io/dmitry-ainutdinov/pen/bXeZbN
UPD:
Ok. Now I knew that max-width doesn’t take padding left and right.
But how it possible to fix?
Ok.
I’m add a wrap with “width: fit-content;”
It’s work.
Don’t know is it best way?
fit-content isn’t supported in IE or Edge. If you need to transition to an automatic width, a JS solution may be best.
I trying to make it in other way with
<
table> tag.
But immediately I’ve got a first problem:
why text in the table cell with paddings get a new line?
https://codepen.io/dmitry-ainutdinov/pen/rNNOwNp