CSS 对齐联系表单列

Question

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

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

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

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

JSFiddle：https://jsfiddle.net/x6zyffx4/

例子：

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

更新：

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

我在 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，分别命名为：包含 google 地图内容的 myContainerMapDiv 和包含表单元素内容的 myContainerFormDiv。

我添加的 css 将两个子 div 推到了左侧。 然后，父级设置垂直对齐方式，以便它们都具有相对于父级顶部的定位。

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

希望能有所启发！

Answer 3

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

HTML

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

CSS

#block-block-4 {
    width: 100%;
}

.block-google-maps {
    float:left;
    width: 45%;
    position: relative;
    display: inline-block;
}
.block-google-maps iframe {
    width: 400px;

}
.node-webform{
    float:left;
    width: 50%;
    position: relative;
    display: inline-block;
}

Updated Fiddle

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