将两个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

更改一个内部div的宽度并根据需要给出边距

[1550515,
 732611,
 554341,
 1555219,
 857679,
 1389395,
 996433,
 1077487,
 967187,
 1316931,
 113262,
 796982,
 62212,
 504090]

Answer 2

使用弹性网格

 #outer{

 display:flex;
 }

Here is the live example

Answer 3

这对你有用吗？ https://jsfiddle.net/mszaju6f/

＆＃13;

＆＃13;

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

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

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

.polaroid {
  position: relative;
  /* width: 50%;
  max-width: 350px; */
  /* float:left; */
  display:inline-block;
  width: 200px;
  vertical-align: top;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;