如何在不改变内部 div 位置的情况下包装多个 div

Question

So I'm having this issue, I'm coding a basic website using NextJS, this is an example of my code

I have a set of div like this with relative positioning

<div>one</div>
<div>two</div>
<div>three</div>

output it looks something like this

one two three

Now I want to wrap all 3 divs inside another div with absolute positioning so I can change its position freely across the screen

<div>
  <div>one</div>
  <div>two</div>
  <div>three</div>
</div>

But doing that will change inner div layout to this

one
two
three

So basically, how do I wrap multiple divs inside another div without changing inner div position?

Answer 1

Try this in your CSS code for the inner divs:

display: inline-block;

and this for the outer div:

width: fit-content;

See this jsfiddle demonstration

Answer 2

Something like this:

 .parent{ position: absolute; }.child{ display: inline-block }

 <div class="parent"> <div class="child">One</div> <div class="child">Two</div> <div class="child">Three</div> </div>

Answer 3

I think the problem is that div is not the right tag for your purpose. You might want to use span instead.