需要帮助使此页面具有响应性答案

【问题标题】：Need help making this page responsive需要帮助使此页面具有响应性
【发布时间】：2014-09-25 21:54:05
【问题描述】：

我已经尝试了 3 天，以使我的联系表单与嵌入在同一页面中的 iframe 地图对齐。有 4 个主要 div。 (1) iframe header (2) iframe position (3) form header (4) form position:

<div class="iframeTitle">How to Find Us</div>
<div class="iframepos">
<div class="contactTitle">Contact Us</div>
<div class="form_pos">

我已将媒体查询添加到代码中，但即使使用在线工具显示网站在不同分辨率下的显示方式，仍然存在问题。

如果您在找到here 的 dem 中扩展/收缩宽度条，您可以看到地图和表单并不总是并排的。该演示包含我的大部分代码，因为我觉得这一切都是相关的，因为这个问题涉及响应式设计。

任何反馈或修复都会非常棒。提前致谢

【问题讨论】：

不确定你在说什么。下面的人发布了一个答案，现在我的问题已经解决了。 1个问题，1个答案。对我来说似乎很有效。

标签： html css responsive-design media-queries

【解决方案1】：

如果您想让页面具有响应性，您确实需要将元素包装在 div 中。您当前的结构是：

<header>

    <div class="iframeTitle"></div>
    <div class="iframepos"></div>

</header>
<div class="contactTitle"></div>

<div class="form_pos"></div>

<div class="OfficeEmail"></div>

<div class="OfficeToll"></div>

<div class="OfficeLocal"></div>

<div class="OfficeFax"></div>

<div class="DropBy"></div>

<div class="Address1"></div>

<div class="Address2"></div>

应该是这样的：

<header>

        <div class="iframeTitle"></div>
        <div class="iframepos"></div>

</header>

<div id="CONTACT_FORM">
    <div class="contactTitle"></div>

    <div class="form_pos"></div>
</div>
<div id="ADDRESS">

    <div class="OfficeEmail"></div>

    <div class="OfficeToll"></div>

    <div class="OfficeLocal"></div>

    <div class="OfficeFax"></div>

    <div class="DropBy"></div>

    <div class="Address1"></div>

    <div class="Address2"></div>
</div>

然后将带有媒体查询的样式应用于包装元素。

这应该是您的起点。

【讨论】：