html - 需要帮助使此页面响应

Question

我已经尝试了 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">

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

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

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

Answer 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>

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

这应该是您的起点。