Question

我已经尝试了3天，使我的联系表单与嵌入在同一页面中的iframe地图对齐。有4个主要的div。（1）iframe header（2）iframe position（3）表头（4）表单位置：

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

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

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

任何反馈或修复都会如此惊人。提前致谢

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>

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

这应该是你的出发点。

需要帮助使此页面响应

1 个答案: