CSS中可变的“固定”宽度点？

Question

 <div class="container"> <div class="content"> Apple </div> </div> 

Let's say 'content' should always have a width either 0, 25, 50, 75 or 100%, depending on its content. If the word 'Apple' takes 20% width of 'container', 'content' should have a size of 25%. If the word 'Lettuce' takes 40% width of 'container', 'content' should have a size of 50%. I do not know what kind of content will be inside 'content', neither the width of the actual content. But it should always snap to these values.

Is this behaviour possible using only css? If no, what would be the easiest solution to achieve this?

Edit: I am aiming to put any number of 'content' divs inside 'container'. All of them should have aa width which is one of these values. I also do not know the number of content divs.

Answer 1

Something to consider is using flex boxes with css. In this case, using

.container {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

Should allow you to dynamically change the width. What you are asking for is not something that seems very responsive or practical. You could also use width: auto so the element will size itself.

Answer 2

Let's assume there's not a solution in css.

In Javascript,

var content = document.getElementById('content')
var container = document.getElementById('container')
var contentWidth = content.getBoundingClientRect().width
var containerWidth = container.getBoundingClientRect().width
var percent = contentWidth / containerWidth * 100
if (percent === 0) {
   content.style.width = '0%'
} else if (percent < 25) {
   content.style.width = '25%'
} else if (percent < 50) {
   content.style.width = '50%'
} else if (percent < 75) {
   content.style.width = '75%'
} else {
   content.style.width = '100%'
}

Answer 3

I don't believe this is possible using pure CSS.

Here's a javascript method which will do it, though; comments below explain how it works:

 let list = document.getElementsByClassName('content'); let containerWidth = document.getElementsByClassName('container')[0].offsetWidth; Array.from(list).forEach(function(el) { // by default, divs are 100% width, making this useless. So we need to // change the display style to collapse the element width to its content boundary: el.style.display = "inline-block"; // find the smallest of 25%, 50%, 75%, 100% into which the content fits: let newWidth = Math.ceil(el.offsetWidth / containerWidth * 4) * 25; el.style.width = newWidth + "%"; el.style.display = "block"; // back to the original display. (It would be more elegant to have captured the original style.display value, in case it wasn't "block" in the first place, but I'mma handwave over that) }); 

 .content { border: 1px solid; } 

 <div class="container"> <div class="content"> Apple </div> <div class="content"> Something longer than that </div> <div class="content"> Something even longer than that, plus some more text </div> <div class="content"> Something even longer than even longer than even longer than even longer than that plus some more text even on top of that </div> </div> 

This will set percentage widths on the elements, so it will be somewhat responsive to changes in window size -- but if you need the percentages themselves to update you would need to re-run the above code on a (preferably debounced) window.resize event.

Answer 4

This "snapping" behavior isn't possible in pure CSS, however it's possible in JS by measuring the offsetWidth of the element and adjusting its size accordingly.

// select your "content" element (you might need a more specific rule)
const content = document.querySelector('.content');
// Calculate the percentage of its container that it fills up when it's unstyled
const proportion = content.offsetWidth / content.parentNode.offsetWidth;
// Adjust width based on that proportion
if (proportion < .25) content.style.width = '25%';
else if (proportion < .5) content.style.width = '50%';
else if (proportion < .75) content.style.width = '75%';
else content.style.width = '100%';