如何将 position 中的一个 div 放入另一个 div 中的 reactJs？

Question

我想将子 div 放在父 div 的末尾，但定位不起作用。 我正在为此代码使用 reactJs、NextJs 和样式组件；

reactjs 代码：

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

样式组件代码：

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});
`;

Answer 1

如果你的.inner部门有一个 position 的absolute而你的.outer有 position relative ， .inner部门将在.outer内部调整自己。 例如：如果你想让.inner粘在.outer的底部，你可以这样做：

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

Answer 2

首先使用命令从终端安装引导程序

npm install react-bootstrap bootstrap

假设您正在使用已导入到 index.js 的组件，例如 Leftsidebar.js、Rightsidebar.js 和 Content.js

要做到这一点，你必须在你的 react.js 中安装 bootstrap

按照步骤

index.js 打击

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');
    );

很简单，我们使用网格系统将屏幕分成 12 个中的 4 个不同的部分其次，上面的代码只是在文本编辑器中输入。但我的目的是指导您如何使用 react js 和在不同的布局或位置显示数据它之所以有效，是因为我自己使用行列来排列 position 中的数据，这是最简单的方法。