1

我有两列，其中左侧具有动态宽度，右侧具有位置：固定的谷歌地图。

左列有一个最小宽度值，当调整窗口大小时，它不起作用。

这是一个jsfiddle：http: //jsfiddle.net/WWLd9/61/

HTML：

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<section id="panel_contenedor">
</section>
<section id="mapa_contenedor">
<div id="map-canvas"></div>
</section>

CSS：

#panel_contenedor {
width: 50%;
min-width:300px;
}
#mapa_contenedor {
width:50%;
height:100%;
position:fixed;
top:0;
right:0;
}
#map-canvas {
height:100%;
width:100%;
}
4

1 回答 1

1

我在该部分添加了amin-width:50%;并#left更改min-width:200px;为. 看来，在所有情况下，两个部分都会相应调整，蓝色部分不再隐藏红色。min-width:50%;#right

编辑：

position:fixed相对于 DOM 的 html 元素。这就是为什么即使最小宽度设置为 300 像素，您也会看到地图的原因。

要修复它，这是我尝试过的：

我用 iframe 替换了谷歌地图（你可以随时设置它）。

HTML：

<div id="main">
    <section id="panel_contenedor">
        todo texto bien elaborado ha de presentar siete características:<br><br><br><br>Ha de ser coherente, <br><br><br><br>es decir, centrarse en un solo tema, de forma que las diversas ideas<br><br><br><br> vertidas en él han de contribuir a la creación de una idea global.
    </section>
    <section id="mapa_contenedor">
        <iframe width="600" height="300" marginheight="0" 
        src="http://maps.google.com/maps?ie=UTF8&amp;q=loc:{address} {number}@{latitude},{longitude}&amp;z=14&amp;output=embed&amp;iwloc=near" 
        frameborder="0" marginwidth="0" scrolling="no">
        </iframe>
    </section>
</div>

CSS： 

#panel_contenedor {
    width: 50%;
    min-width:300px;
    float:left;
}

#mapa_contenedor {
    max-width:50%;
    height:100%;
    float:right;
}

#map-canvas {
    height:100%;
    width:100%;
}

#main{
    width: 100%;
}

body{
    display:inline-block;
    /*overflow-x:hidden;*/
}

我已发表评论/*overflow-x:hidden;*/。只有在缩小窗口时需要滚动条时，它才会添加滚动条。在display:inline-block;同一行显示两个部分。我们只需要float:left在左侧部分添加一个，在右侧部分添加一个float:right。我已将它们放入#main容器中以将大小调整为整个窗口。

于 2014-05-23T21:13:50.860 回答