尽管下面是网上的例子，但潜水者并没有并排出现

Question

我一直在寻找一个解决方案，以解决我没有并排出现的2个div的问题。这很令人困惑，因为我觉得我一直在做我在网上看到的几个例子。就像这个StackOverflow帖子。

我缺了什么？

谢谢！

<section class = "container">
<div id="googleMap">
<script src="redacted-for-privacy-of-group"></script>
</div>
<div id="showInfo">
<img id="customerIMG" style="width: 100%">
<p style="width: auto; height: auto" id="customerINFO"></p>
</div>
</section>

css

.container {
width: 90%;
height: 400;
margin: auto;
padding: 10px;
}
#googleMap {
width: 70%;
height: 400px;
}
#showInfo {
background-color: white;
margin-left: 70%;
height: 400px;
}

Answer 1

<section class = "container">
<div id="googleMap">
<script src="redacted-for-privacy-of-group"></script>
</div>
<div id="showInfo">
<img id="customerIMG" style="width: 100%">
<p style="width: auto; height: auto" id="customerINFO"></p>
</div>
</section>

css

.container {
width: 90%;
height: 400px;
margin: auto;
padding: 10px;
}
#googleMap {
width: 70%;
height: 400px;
float: left;
}
#showInfo {
background-color: white;
/*margin-left: 70%;*/
width: 30%;
height: 400px;
float: left;
}

Answer 2

使用float:left

#googleMap {
width: 70%;
height: 400px;
float:left;
}