Html 在另一个div的右侧放置一个div

如何将div#box放置在相同的高度，并在div#mytext的右侧放置20px

HTML

---

感谢您的帮助。

您可以通过使用

display:flex

将内容包装在一个div中来实现这一点

.container{
显示器：flex；
}
#我的文本{
保证金：0自动；
宽度：450px；
高度：280px；
边框：8px纯蓝色；
边界半径：10px；
框大小：边框框；
大纲：无；
调整大小：无；
字体大小：45px；
字号：500；
文本对齐：居中；
对齐项目：居中；
背景色：白色；
填充：10px；
}
#盒子{
显示：内联块；
宽度：90px；
高度：280px；
背景色：浅灰色；
边界半径：8px；
}

这是一个居中的文本

包裹元素并使其居中

.wrapper{
文本对齐：居中；
}
#我的文本{
显示：内联flex；/*从“flex”切换*/
宽度：450px；
高度：280px；
边框：8px纯蓝色；
边界半径：10px；
框大小：边框框；
大纲：无；
调整大小：无；
字体大小：45px；
字号：500；
文本对齐：居中；
对齐项目：居中；
背景色：白色；
填充：10px；
}
#盒子{
显示：内联块；
垂直对齐：顶部；
宽度：90px；
高度：280px；
背景色：浅灰色；
边界半径：8px；
}

这是一个居中的文本

如果您希望灰框向右对齐20像素，可以使用此选项。请注意，容器具有设置的宽度。它还包括8px，用于说明蓝色边框宽度：

#容器{
背景：#cc0000；
保证金：0自动；
宽度：568px；
}
#我的文本{
显示器：flex；
浮动：左；
宽度：450px；
高度：280px；
边框：8px纯蓝色；
边界半径：10px；
框大小：边框框；
大纲：无；
调整大小：无；
字体大小：45px；
字号：500；
文本对齐：居中；
对齐项目：居中；
背景色：白色；
填充：10px；
}
#盒子{
浮动：对；
宽度：90px；
高度：280px；
背景色：浅灰色；
边界半径：8px；
}

这是一个居中的文本

使用

浮动：左而不是
显示：flex和
显示：内联块
检查此项
<div id="mytext">This is a centered text</div>
<div id="box">  

 #mytext {
            display: flex;
            margin: 0 auto;
            width: 450px;
            height:280px;
            border: 8px solid blue;
            border-radius: 10px;
            box-sizing: border-box;
            outline:none;
            resize:none;
            font-size:45px;
            font-weight:500;
            text-align:center;
           align-items:center;
            background-color:white;
            padding:10px;

        }
          #box {
              display:inline-block;
              width:90px;
              height:280px;
              background-color:dimgrey;
               border-radius: 8px;
          }