Question

一般来说CSS还是新手，我尝试将第二个联系表单列与第一个联系表单列对齐（地图）。

我已尝试将第一列向左浮动，第二列向右浮动，但第二列不会与第一列并排排列。

在第二列（联系表单）上使用position：absolute有效，但它没有响应，所以我正在寻找另一种方法来做到这一点，所以它是响应性的。

如何将联系表单与地图对齐并使其仍然具有响应性？

示例：

enter image description here

CSS：

Contact form:

.page-node-28 section.block-system {
float: right;
width: 40%;

/*position: absolute;*/
/*right: 100px;*/
/*top: 110px;*/
/*float:right;*/
/*width: 40%;*/
}


Google maps:

.page-node-28 .block-google-maps {
width: 40%;
min-height: 500px;
float:left;
}

HTML：

Column1（地图）

<section id="block-block-2" class="block block-block">
<div class="contextual-links-wrapper">
<ul class="contextual-links">
    <li class="block-configure first last">
        <a href="...">Configure block</a>
    </li>
</ul>
</div>
<div class="block-google-maps">
    <iframe src="https://www.google.com/maps/...">
    </iframe>
</div> 
</section> <!-- /.block -->

第2栏（联系表格）

<section id="block-system-main" class="block block-system clearfix">
<div id="node-28" class="node node-webform">
    <div class="submitted">
    <div class="content">
        <form class="webform-client-form" method="post">
            ...
        </form>
</section>
<!-- /.block -->

更新： enter image description here

Answer 1

这是我将使用的css，然后是媒体查询的响应性

.block-google-maps {
 width: 45%;
 float: left;
 }

.webform-client-form {
 width: 45%;
 float: left;
 }

http://codepen.io/algib/pen/qdMZaz

Answer 2

这不是100％准确，但会让你清楚地知道如何实现它

HTML

public class AppCORSFilter implements Filter {

    private static final String ALLOWED_ORIGINS = "*";
    private static final String ALLOWED_HTTP_HEADERS = "accept, x-requested-with, access-control-allow-origin,Content-Type,authorization";
    private static final String ALLOWED_HTTP_METHODS = "POST,GET,PUT,OPTIONS,DELETE";

    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;

        //String headerValue = request.getHeaders("Access-Control-Request-Headers"); 
        response.setHeader("Access-Control-Allow-Origin", ALLOWED_ORIGINS);
        response.setHeader("Access-Control-Allow-Methods", ALLOWED_HTTP_METHODS);
        response.setHeader("Access-Control-Allow-Headers", ALLOWED_HTTP_HEADERS);
        response.setHeader("Access-Control-Max-Age", "3600");

        HttpServletRequest request = (HttpServletRequest) req;

        if (request.getMethod().equals("OPTIONS")) {
            try {
                response.getWriter().print("OK");
                response.getWriter().flush();
            } catch (IOException e) {
                e.printStackTrace();
            }
        } else {
            chain.doFilter(req, res);
        }
    }

    public void init(FilterConfig filterConfig) {
    }

    public void destroy() {
    }
}

CSS

<section id="block-block-2" class="block block-block">
<div class="contextual-links-wrapper">
<ul class="contextual-links">
    <li class="block-configure first last">
        <a href="...">Configure block</a>
    </li>
</ul>
</div>
<div class="block-google-maps">
    <iframe src="https://www.google.com/maps/...">
    </iframe>
</div> 
</section> <!-- /.block -->

<section id="block-system-main" class="block block-system clearfix">
<div id="node-28" class="node node-webform">
    <div class="submitted">
    <div class="content">
        <form class="webform-client-form" method="post">
            ...
        </form>
</section>
<!-- /.block -->

Updated Fiddle

就响应速度而言，您必须使用媒体查询。

Answer 3

我在jsfiddle上为你的css添加了以下规则：

/* I added the following three rules to your css on the jsfiddle */
.myContainerDiv {
    position: relative;
    vertical-align: top;
    width: 950px;
}
.myContainerMapDiv {
    position: relative;
    width: 450px;
    margin-right: 25px;
    float: left;
    overflow: hidden;
}
.myContainerFormDiv {
    position: relative;
    width: 400px;
    float: left;
    overflow: hidden;
}
/* I added the above rules */

接下来，我将你的代码分成了一个包含div（又名myContainerDiv）和两个子div，分别命名为：myContainerMapDiv，包含google地图的东西，myContainerFormDiv包含表单元素。

我添加的CSS将两个子div推到左边。然后，父级设置垂直对齐，使它们都具有相对于父级顶部的位置。

最后，我还在我的css中添加了剪辑，以显示其他一些元素包含可影响您获得成功结果的大小值。例如，地图的iframe宽度为600px，您无法远离，而textarea也会根据我给这些div的宽度进行裁剪。

希望它有所启发！

CSS对齐联系表单列

3 个答案: