如何将网页拆分为“部分”

Question

我正在“联系我们”页面，在这里我有三个不同的人可以联系。

我设计此页面的方式如下：

............................................... .......

名称

左手边=联系方式，右手边=图片。

下一个人

............................................... ......

目前，我给图片提供了一个class = profile并编码到我的.css文件中：

.profile {
  float = right
}

然而，所有这些似乎已经完成了将我的图像向右推，就像我想要的那样，但是现在所有的文本都被打包并包裹在下面。

我希望所有的图片都是相同的尺寸（宽度= 700像素，高度 - 440像素），我已将其编码到我的html中，我想要这个高度来定义每个“部分”的大小。

我该怎么做

a）将文字保持在左边而不是在下面包裹 b）阻止它聚集起来？

我最初的想法是加入一系列换行符，但我觉得在.css中必须有一个更简洁的方法？

编辑：https://jsfiddle.net/kaish/c9kaxLLh/

大家好，这是我的jsfiddle的链接，显示我的HTML和.css编码。

自发布此消息后，客户想要一张他们办公室的谷歌地图而不是他们的个人资料图片，所以我稍微修改了图片，但同样的问题仍然存在。我想要右边的地图和左边的联系方式以及我希望它分成不可见的“部分”的每三个客户。

Answer 1

你想要这样的东西

<style>
.parent
{
	width:100%;
}
.left
{
	float:left;
	width:50%;
	box-sizing:border-box;
	padding:5px;
	border:#CCC solid 1px;
	min-height:200px;
}

.right
{
	float:left;
	width:50%;
	box-sizing:border-box;
	padding:5px;
	border:#CCC solid 1px;
	min-height:200px;
}

</style>

<div class="parent">

 
    <div class="left">
         
        some details
    </div>

    <div class="right">
        some image
    </div>
 


<div>
<!--parent ends-->

现在如果我把你的代码放在我的方框内

<style>
.parent
{
	width:100%;
}
.left
{
	float:left;
	width:50%;
	box-sizing:border-box;
	padding:5px;
	border:#CCC solid 1px;
	min-height:200px;
}

.right
{
	float:left;
	width:50%;
	box-sizing:border-box;
	padding:5px;
	border:#CCC solid 1px;
	min-height:200px;
}

</style>

<div class="parent">

 
    <div class="left">
         
        <h3>Form 1</h3>
        <form action="form" method="get">
        
        <input name="" type="text" /><br />
        <textarea name="" cols="" rows=""></textarea>
        
        </form>
        <hr style="border-top:#CCC solid 1px; width:100%" />
        
        <h3>Form 2</h3>
               <form action="form" method="get">
        
        <input name="" type="text" /><br />
        <textarea name="" cols="" rows=""></textarea>
        
        </form>
        <hr style="border-top:#CCC solid 1px; width:100%" />
        
      <h3>  Form 3</h3>
               <form action="form" method="get">
        
        <input name="" type="text" /><br />
        <textarea name="" cols="" rows=""></textarea>
        
        </form>
       
        
    </div>

    <div class="right">
        
        <!--your code starts-->
        <div class="contact_location">
<h3>Employee #1</h3>

<div class="map"><script src='https://maps.googleapis.com/maps/api/js?v=3.exp'></script>
<div style="overflow:hidden;height:440px;">


<div id="gmap_canvas" style="height:440px;"></div>

<div>
<small><a href="http://embedgooglemaps.com">embed google maps </a></small>
</div>

<div>
<small><a href="http://freedirectorysubmissionsites.com/">link directories</a></small></div>

<style type="text/css">#gmap_canvas img{max-width:none!important;background:none!important}
</style>

</div>

<script type='text/javascript'>function init_map(){var myOptions = {zoom:17,center:new google.maps.LatLng(50.402068577896536,-4.185562806082097),mapTypeId: google.maps.MapTypeId.ROADMAP};map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(50.402068577896536,-4.185562806082097)});infowindow = new google.maps.InfoWindow({content:'<strong>St Beaudeux News</strong><br>628 Wolseley Rd<br>'});google.maps.event.addListener(marker, 'click', function(){infowindow.open(map,marker);});infowindow.open(map,marker);}google.maps.event.addDomListener(window, 'load', init_map);</script>

</div>

  <p> <b> Address </b></p>      
        
       <!-- your code ends-->
        
    </div>
 


<div>
<!--parent ends-->