使用HTML5并排放置表单和地图的内容

Question

我想把地图和形式的内容并排放置。我希望代码具有响应式设计。我试过把内容放在表格和列表格式中。但仍然形式在地图上。当它在更宽的屏幕上显示时，我希望并排内容。在较小宽度的屏幕上，它们一个在另一个上面。

请有人建议最好的方法来实现这个目标吗？

Answer 1

嗯，这对于媒体查询来说非常简单......

HTML

<div id="map"> <!-- your map --> </div>
<div id="form"> <!-- your form --> </div>

CSS

#map, #form {
    width: 50%;
    float: left;
}

@media handheld, only screen and (max-width: 500px), only screen and (max-device-width: 500px) {
    #map, #form {
        width: auto;
        float: none;
    }
}

当您不再需要DIV时，将500px替换为您的断点。