How to wrap multiple div without changing inner div posittion-CodePudding

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?

CodePudding user response：

Try this in your CSS code for the inner divs:

display: inline-block;

and this for the outer div:

width: fit-content;

CodePudding user response：

Something like this:

.parent{
  position: absolute;
  bottom: 0px;
}

.child{
  display: inline-block
}

<div >
  <div >One</div>
  <div >Two</div>
  <div >Three</div>
</div>

CodePudding user response：

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