在另一个div的右边放一个div

Question

如何将div #box置于div的右侧同一高度和20px #mytext

HTML

<div id="mytext">This is a centered text</div>
<div id="box">  

CSS

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

https://jsfiddle.net/fredericmarcel/kuv1m851/5/

感谢您的帮助。

Answer 1

包裹元素并居中。

  .wrapper {
    text-align: center;
  }
  #mytext {
    display: inline-flex; /* switched from 'flex' */

    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;
    vertical-align: top;
    width: 90px;
    height: 280px;
    background-color: dimgrey;
    border-radius: 8px;
  }

<div class="wrapper">
  <div id="mytext">This is a centered text</div>
  <div id="box">

  </div>

Answer 2

您可以通过将内容包装在display: flex的div中来实现此目的。的 Updated fiddle

  .container {
    display: flex;
  }
  #mytext {
    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;
  }

<div class="container">
  <div id="mytext">This is a centered text</div>
  <div id="box"></div>
</div>

Answer 3

如果您希望灰色框与右侧对齐20px，则可以使用此框。请注意，容器具有设定宽度。它还包括8px以计算蓝色边框宽度：

＆＃13;

＆＃13;

#container {
  background: #cc0000;
  margin: 0 auto;
  width: 568px;
}
#mytext {
  display: flex;
  float: left;
  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 {
  float: right;
  width: 90px;
  height: 280px;
  background-color: dimgrey;
  border-radius: 8px;
}

＆＃13;

<div id="container">
  <div id="mytext">This is a centered text</div>
  <div id="box"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

使用float:left;代替display: flex;和display: inline-block;