html - 为什么iframe不与旁边的div内联

Question

好吧，问题是我从一个 div 中的一个 div 中的 google maps 获得了一个 iframe，紧挨着一个具有相同 css 属性的 div，但它们不是并排内联的，尽管它们彼此对齐。

div.morecontent_holders {
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  position: relative;
  float: none;
  display: inline-block;
  margin-right: 5px;
  margin-left: 5px;
  margin-top: 0px;
  margin-bottom: 5px;
  width: 90%;
  min-width: 90%;
  max-width: 500px;
  min-height: 90%;
  max-height: 1000px;
  border-bottom: dashed 2px blue;
}
div.text1 {
  position: relative;
  display: inline-table;
  float: center;
  margin-top: 5px;
  margin-bottom: 5px;
  width: auto;
  height: 200px;
  min-width: 200px;
  max-width: 500px;
  border-left: solid 2px silver;
  border-right: solid 2px silver;
  background-color: silver;
  font-weight: bold;
  -webkit-border-radius: 5px;
  background: #fff;
  box-shadow: 0 1px 2px #c9c9c9;
  -moz-box-shadow: 0 1px 2px #c9c9c9;
  -webkit-box-shadow: 0 1px 2px #c9c9c9;
  border-radius: 2px;
  margin-bottom: 15px;
  font-size: 1.4rem;
}
div.text1:hover {
  box-shadow: 0 2px 2px #bababa;
  -moz-box-shadow: 0 2px 2px #bababa;
  -webkit-box-shadow: 0 2px 2px #bababa;
}

<div id="page_1" class=morecontent_holders>
  <div id="page_1" class=text1>
  </div>
  <div id="page_1" class=text1>
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d75703.03243173788!2d-3.0722340453397394!3d53.634137210407246!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487b15315eb47ffb%3A0x9464ca1ad2094f88!2sSouthport!5e0!3m2!1sen!2suk!4v1473131011082"
    width="200" height="200" frameborder="0" style="border:0" allowfullscreen></iframe>
  </div>

Answer 1

div.morecontent_holders{
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  position: relative;
  float: none;
  display: inline-block;
  margin-right: 5px;
  margin-left: 5px;
  margin-top: 0px;
  margin-bottom: 5px;
  width: 90%;
  min-width: 90%;
  max-width: 500px;
  min-height: 90%;
  max-height: 1000px;
  border-bottom: dashed 2px blue;
}
div.text1{
  position: relative;
  display: inline-table;
  float: center;
  margin-top: 5px;
   width: auto;
  height: 200px;
  min-width: 200px;
  max-width: 500px;
  border-left: solid 2px silver;
  border-right: solid 2px silver;
  background-color: silver;
    font-weight: bold;
    -webkit-border-radius: 5px;
  background: #fff;
  box-shadow: 0 1px 2px #c9c9c9;
  -moz-box-shadow: 0 1px 2px #c9c9c9;
  -webkit-box-shadow: 0 1px 2px #c9c9c9;
  border-radius: 2px;
  margin-bottom: 1px;
  font-size: 1.4rem;
}

div.text1:hover{
  box-shadow: 0 2px 2px #bababa;
  -moz-box-shadow: 0 2px 2px #bababa;
  -webkit-box-shadow: 0 2px 2px #bababa;
}

<div id="page_1" class=morecontent_holders>
      <div id="page_1" class=text1>
      </div>
      <div id="page_1" class=text1>
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d75703.03243173788!2d-3.0722340453397394!3d53.634137210407246!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487b15315eb47ffb%3A0x9464ca1ad2094f88!2sSouthport!5e0!3m2!1sen!2suk!4v1473131011082" width="200" height="200" frameborder="0" style="border:0" allowfullscreen></iframe>
      </div>