CSS对齐联系人表单列

问题描述：

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

我试着将第一个向左和向右漂移，但第二个列不会与第一列并排排列。

使用位置：绝对第二列（联系表）工作，但它不响应，所以我正在寻找另一种方式来做到这一点，所以它的响应。

我该如何将联系表格与地图对齐并保持响应？

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

实施例：

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

不能使用具有列和行的表吗？你应该能够用HTML做。 – ydobonebi

答

这是CSS我会使用随后媒体查询用于响应

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

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

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

添加JSFiddle来提问。 https://jsfiddle.net/x6zyffx4/ –

这只是将它移到地图下的左侧，请参阅问题中的更新图像。 –

我没有检查codepen，但HTML的编写方式，第n节div默认'display：block;'所以如果你在css中添加'display：inline-block;'在答案中，你可以实现它，definining只是float和宽度不会做任何好事 – Shehary

答

这是不是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

并尽可能响应，你必须使用媒体查询。

这只是将联系表单与地图下方的左侧对齐。我已经发布了一个小提琴：https://jsfiddle.net/x6zyffx4/我想让他们并排（左侧地图和右侧表格相互对齐） –

好吧，再次感到厌倦，仍然它将它置于地图块之下，如问题中'更新'示例所示。 –

更新与您的更改：https://jsfiddle.net/x6zyffx4/19/ –

答

我添加了以下规则你的CSS上的jsfiddle：

/* 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谷歌地图的东西，和myContainerFormDiv包含表单元素的东西。

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

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

希望它散发出一些光芒！

CSS对齐联系人表单列

相关推荐