【问题标题】:place one object on left and second on right将一个对象放在左侧,将第二个放在右侧
【发布时间】:2021-07-13 05:51:14
【问题描述】:

我的屏幕是这样的:

目前,文本位于顶部,而红色部分 (VideoComponent) 位于底部。我希望 VideoComponent 出现在左侧,而所有文本都应该向右移动。可能像 flexbox 一样?

    return (
        <div>
            <main className="content">
                In this section.....TEXT
<div className="video">
                    <VideoComponent />
                </div>
            </main>
        </div>
    );

视频组件:

    return (
    <div>
        <Sketch className="sketch" />
        </div>
    </div>)

视频css

.sketch{
    padding-top: 30px;
}

.button{
    padding-left: 0px;
    padding-top: 20px;
}

.secondbutton{
    padding-left: 0px;
    padding-top: 70px;
}

【问题讨论】:

    标签: javascript html css reactjs typescript


    【解决方案1】:

    如果您希望文本环绕视频,请使用浮动。在下面的示例中,我有一段文本想要环绕两个图像,因此我将图像插入到我希望它们垂直放置的 p 标签中,并使用 float: left。

    img {
      width: 100px;
      height: 100px;
      background: blue;
      margin: 10px;
    }
    
    #left {
      float: left;
    }
    
    #right {
      float: right;
    }
    <p>
       <img id="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
       <img id="right"> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>

    【讨论】:

    • 您可以在我分享的代码 sn-p 中看到它绝对有效。如果它没有在您的代码库中正确呈现,最可能的原因是您编写了覆盖它的其他 CSS。
    【解决方案2】:

    我认为 flex 比 float 更好。

    return (
        <div>
            <main className="content">
                <div className="video">
                    <VideoComponent />
                </div>
                <div className="text">
                    In this section.....TEXT
                </div>
            </main>
        </div>
    );
    
    CSS
    .context {
       display: flex;
       justify-content: space-between;
    }
    

    【讨论】:

      猜你喜欢
      • 2020-08-31
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-06-15
      • 1970-01-01
      • 1970-01-01
      • 2023-03-30
      • 1970-01-01
      相关资源
      最近更新 更多