javascript - DIV 宽度不合逻辑地卡住了，无法更改

Question

Here's a JSFiddle.
有一个简单的 <div> .在里面，还有另外 2 个 <divs>和一个 <h2> .这很简单。我有较低的宽度 <div> —Google Maps 一个(尽管它在 JSFiddle 中不起作用)—与其父级的宽度完全相同 <div> .它曾经完美地工作。我真的不记得什么时候了，但我确定在添加我的 <h2> 之前和一些修改(也许？)，它和它应该的一样宽。
现在，它停留在那个愚蠢的宽度——尽管 map 仍然有效——无论如何我愿意。

---

我尝试删除 <h1>标记以查看是否是问题所在，但没有解决任何问题。我也尝试了很多其他的东西，但我就是做不到 <div>返回到其应有的宽度。

---

如果您想在此处而不是在 JSFiddle 上查看，请使用以下代码:
HTML 和 JavaScript(尽管 JavaScript 可能无关紧要，因为它不影响 <div> 的大小):

function initialize() {
  var mapCanvas = document.getElementById('map-canvas');
  var mapOptions = {
    center: new google.maps.LatLng(41.726371, 44.731433),
    zoom: 18,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(mapCanvas, mapOptions);
};
google.maps.event.addDomListener(window, 'load', initialize);

 #wrap-left {
   float: left;
   border: 1px solid black;
   margin-top: 60px;
   font-family: TikalSansMedium;
   font-weight: normal;
   font-style: normal;
   font-size: 11pt;
   background-color: white;
   border: 1px solid #9F9F9F;
   border-radius: 2px;
   height: 450px;
   width: 610px;
   position: relative;
 }
 h2#fnd_cl {
   border: 1px solid #9F9F9F;
   border-radius: 2px;
   position: absolute;
   top: -33px;
   left: 30%;
   font-family: 'Antic Slab';
   background-color: #F8CE26;
   width: 230px;
   text-align: center;
 }
 div#cont {
   height: 50px;
   padding-left: 8px;
   padding-top: 35px;
   border: 1px solid black;
 }
 div#map-canvas {
   width: 610px;
   height: 300px;
   position: absolute;
   bottom: 0;
   width: 230px;
   background-color: black;
 }

<script src="https://maps.googleapis.com/maps/api/js"></script>

<br>

<div id="wrap-left">

  <h2 id="fnd_cl">Find or Call us</h2>

  <div id="cont">
    Our workshop is located on Blah-blah Street.
    <br />Call us on: 556-546-564 or 2-35-68-91
  </div>

  <div id="map-canvas"></div>

</div>

Answer 1

从 div#map-canvas 中删除 width:230px;

您在此 CSS block 中声明了两次宽度，这导致了您的问题。