如何并排排列元素？ [重复]

Question

这个问题在这里已有答案：

• Align <div> elements side by side 3回答
• How to place div side by side 7个答案

我有一个视频和一个CSS动画，我希望视频居中，动画在左边。我试过浮动它们但是它们之间留下了很大的差距。 - codepen - https://codepen.io/MarkHarrison/pen/xpZLLy

iframe{
    border: 10px solid transparent;
    border-image-source: url(https://i.imgur.com/91tJ1qi.png);
    border-image-slice: 10;
    width: 500px;
    height: 300px;
    display: block;
    margin: auto;
}

.box {
    position: relative;
    margin: 0px;
    display: block;
    width: 600px;
    height: 420px;
    margin-top: 15%;
}

Answer 1

1. 将“position：relative”添加到.wrapper //不要2.从.box中删除％margin-top
2. 将magic css添加到.box 位置：绝对;顶部：0;左：计算（50％ - 520px）; transform：translateX（-50％）;

//不要'4.用em / px调整顶部，使图像垂直适合使用transform：translateY（）代替