CODEWITHSUNDEEP
javascriptcssreactjsnext.jsstyled-components
Wallace Nascimento
Wallace Nascimento

Reputation: 161

How to position a div inside another div in reactJs?

I want to put the children div on end of parent div , but positioning is not working. i'm using reactJs, NextJs and styled-components for this code;

reactjs code:

<a href={links[indexImg]} target="_blank" >
    <Carousel
        image={images[indexImg]}
    >
        <DescriptionText>
            <p>{descriptions[indexImg]}</p>
        </DescriptionText>
    </Carousel>
</a>

styled-componentes code:

export const DescriptionText = styled.div`
    color: white;
    background-color: black;
    background-position: 20px;
    opacity: 0.5;
`;
export const Carousel = styled.div`
    position: relative;
    border-radius: 50px;
    border: solid;
    border-width: 3px;
    border-color: #C2C2C2;
    margin: 0;
    height: 100%;
    width: 100%;
    justify-content: flex-end;
    background-size: cover;
    background-position: center;
    background-image:url(${props => props.image});
`;

Upvotes: 0

Views: 2259

Answers (2)

user19963522
user19963522

Reputation:

If your .inner division has a position of absolute and your .outer one gets position relative, the .inner division will adjust itself inside the .outer one. For example: if you want the .inner one to stick to the bottom of the .outer one you can do this:

.outer {
    position: relative
}
.inner {
    postion: absolute;
    bottom: 0
}

Upvotes: 1

Muhammad Ali Shah
Muhammad Ali Shah

Reputation: 38

first of all install bootstrap from terminal using the command

npm install react-bootstrap bootstrap

suppose you are working with components like Leftsidebar.js , Rightsidebar.js and Content.js which you have imported to index.js

to do this you have install bootstrap in your react.js

follow the steps

index.js blow

import React from 'react';
   import ReactDom from 'react-dom';
   import Leftsidebar from './Leftsidebar';
   import Rightsidebar from './Rightsidebar';
   import Content from './Content';
    
    ReactDom.render(
    
    // outer most div
    <div class='row'>
    
    <div class='col-4'>
    <Leftsidebar/>
    </div>
    
    
    <div class='col-4'>
    <Content/>
    </div>
    
    <div class='col-4'>
    <Rightsidebar/>
    </div>
    
    </div>
    
    
    ,documment.getelementbyId('root');
    );

simple we have used the grid system to divide the screen into 4 different part out of 12 secondly the above code is just typed in the text editor .but my aim was to guide you how to show data in different layout or positions using react js and it work because i myself use row column to arrange data in position and it is the easiest method .

Upvotes: 0

Related Questions