将一个对象放在左侧，将第二个放在右侧

Question

我的屏幕是这样的：

目前，文本位于顶部，而红色部分 (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;
}

Answer 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>

Answer 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;
}