总体上还是 CSS 的新手,我试图将第二个联系表单列与第一个( map )列对齐。
我试过将第一列 float 到左侧,将第二列 float 到右侧,但是第二列不会与第一列并排对齐。
在第二列(联系表)上使用 position: absolute 有效,但它没有响应,所以我正在寻找另一种方法来做到这一点,所以它是响应式的。
我怎样才能使联系表与 map 保持一致并保持响应?
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:
第 1 列( map )
<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 -->
更新:
最佳答案
这是我将使用的 css,然后是用于响应的媒体查询
.block-google-maps {
width: 45%;
float: left;
}
.webform-client-form {
width: 45%;
float: left;
}
关于html - CSS 对齐联系表单列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31529833/