Question

我使用var thisMarker; var markers=[]; var map; var zoem=0; function initialize() { var mapCanvas = document.getElementById('map'); var mapOptions = {center:new google.maps.LatLng(latitudeMid,longitudeMid),zoom:Zoom,mapTypeId:google.maps.MapTypeId.ROADMAP,streetViewControl:false,mapTypeControl:true,scaleControl:true,scaleControlOptions:{position:google.maps.ControlPosition.TOP_RIGHT}}; map = new google.maps.Map(mapCanvas, mapOptions); var i; var insertion; var previousMarker; var previousZindex; for (i = 0; i < fotoCount; i++) { var myLatLng =new google.maps.LatLng(Latituden[i], Longituden[i]); var marker = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{color:'00ff00',text:Letters[i]}),position:myLatLng,map:map}); marker.set('zIndex', -i); marker.myIndex = i; markers.push(marker); google.maps.event.addListener(marker, 'click', function() { var insertion=""; insertion='<img src=\"http://www.pdavis.nl/Ams/'.concat(Bestanden[this.myIndex],'.jpg\"></img>'); insertion=insertion.concat('<table class=width100><tr><td>Bestand: ',Bestanden[this.myIndex],'</td><td class=pright>Lokatie: ',Latituden[this.myIndex],' °N., ',Longituden[this.myIndex],' °E. (',Letters[this.myIndex],')</td>'); insertion=insertion.concat('<td class=pright>Genomen: ',Datums[this.myIndex],'</td></tr><td colspan=3>Object: ',Objecten[this.myIndex],'</td></table>'); $('#photo').html(insertion); if(previousMarker!=null) { previousMarker.styleIcon.set('color', '00ff00'); // -------------------------------------------- set zIndex previousMarker.styleIcon.set('zIndex', previousZindex); // ------------------------------------------------------- } this.styleIcon.set('color', 'ff0000'); this.styleIcon.set('zIndex', google.maps.Marker.MAX_ZINDEX + 1); thisMarker=this.myIndex; if (zoem==1) //moet nu inzoemen { map.setCenter(new google.maps.LatLng(Latituden[thisMarker], Longituden[thisMarker])); map.setZoom(18); } if (zoem==2) //moet nu uitzoemen { map.setCenter(new google.maps.LatLng(latitudeMid,longitudeMid)); map.setZoom(Zoom); zoem=0; } previousMarker=this; previousZindex=this.zIndex; }); google.maps.event.addDomListener(document.getElementById('volgende'), 'click', nextEvent); google.maps.event.addDomListener(document.getElementById('vorige'), 'click', previousEvent); google.maps.event.addDomListener(document.getElementById('zoemer'), 'click', zoemerEvent); } google.maps.event.trigger(markers[0], 'click'); } function nextEvent() { thisMarker++; if (thisMarker>=fotoCount) {thisMarker=0}; google.maps.event.trigger(markers[thisMarker], 'click'); } function previousEvent() { thisMarker--; if (thisMarker==-1) {thisMarker=fotoCount-1}; google.maps.event.trigger(markers[thisMarker], 'click'); } function zoemerEvent() { if (zoemer.value == 'niet inzoemen op selectie') {zoemer.value = 'inzoemen op selectie'; zoem=2;} else {zoemer.value = 'niet inzoemen op selectie'; zoem=1;} google.maps.event.trigger(markers[thisMarker], 'click'); }显示了两个div，以使它们彼此相邻。当这两个div中都没有文本时，这都有效。但是，当我将文本放在一个div中时，它会显着地向下移动，而另一个则保持相同的位置。无论我将文本放入哪个div，都会发生这种情况;但是，如果我把它放在两者中，只有左边的div会掉下来。

这是一个表示我的意思的代码：http://codepen.io/anon/pen/MwEKPp

display: inline-block

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);

#main_container {
    width: 1000px;
    height: 95%;
    margin: 0 auto;
    font-size: 0px;
}

#logo {
    display: inline-block;
    height: 200px;
    width: 200px;
    background-color: aqua;
    font-size: 20px;
}

#title_area {
    display: inline-block;
    font-size: 20px;
    height: 200px;
    width: 800px;
    background-color: rgb(60,105,123);
    font-family: "open sans";
    font-size: 60px;
}

在标有<div id="main_container"> <div id="logo_title_area"> <div id="logo"> test </div> <div id="title_area"> test </div> </div> </div>和logo的div中输入文字会产生我正在谈论的效果。

有没有人知道如何解决这个问题？无论内容如何，我都需要他们保持并排。提前谢谢！

Answer 1

它只是缺少垂直对齐，默认值为baseline。

E {
    display: inline-block;
    vertical-align: top;
}

Answer 2

#logo, #title-area {
  vertical-align: top;
}

Answer 3

我刚刚为两个div添加了overflow:auto;并且它有效

#logo {
    overflow:auto;
    display: inline-block;
    height: 200px;
    width: 200px;
    background-color: aqua;
    font-size: 20px;
}

#title_area {
    overflow:auto;
    display: inline-block;
    font-size: 20px;
    height: 200px;
    width: 800px;
    background-color: rgb(60,105,123);
    font-family: "open sans";
    font-size: 60px;
}

两个div彼此相邻，一个在文本位于另一个时向下移动

3 个答案: