html - 将两个 div 置于另一个 div 的中心并在它们之间包含边距

Question

我试图将两个 div 在另一个 div 中水平居中，并为每个 div 定义一个最大宽度。我还希望 div 之间有一些空间，这样它们就不会接触。

下面的代码没有达到我的预期:

HTML:

<div class="thing" id="outer">
  <div id="inner">
    <h2>Heading!</h2>
    <p>Words</p>
    <p>More words</p>
  </div>
  <div class="polaroid">
    <p>Words</p>
    <img src="path to image" />
  </div>
</div>

CSS:

.thing {
  min-height: 400px;
  padding: 3vh 1vw;
}

#outer {
  overflow: hidden;
  text-align: center;
  margin: auto;
  display: inline-block;
}

#inner {
  width: 50%;
  max-width: 600px;
  text-align: justify;
  /* float: left; */
  height: 422px;
}

.polaroid {
  position: relative;
  /* width: 50%;
  max-width: 350px; */
  /* float:left; */
}

.polaroid img {
  border: 10px solid #fff;
  border-bottom: 45px solid #fff;
  -webkit-box-shadow: 3px 3px 3px black;
  -moz-box-shadow: 3px 3px 3px black;
  box-shadow: 3px 3px 3px black;
  width: 50vw;
  max-width: 450px;
}

.polaroid p {
  position: absolute;
  text-align: center;
  width: 100%;
  bottom: 0px;
  bottom: 0px;
}

Answer 1

使用 flex 网格

 #outer{

 display:flex;
 }

Here is the live example