html - 如何将网页分割成 "sections"

Question

我正在制作一个“联系我们”页面，在这里我要联系三个不同的人。

我设计这个页面的方式是这样的:

................................................ …………

姓名

左侧 = 联系方式，右侧 = 图片。

下一个人

................................................ ……

此刻，我给图片一个 class=profile 并编码到我的 .css 文件中:

.profile {
  float = right
}

然而，这一切似乎都是将我的图像推到右边，就像我想要的那样，但现在所有的文本都聚在一起并包裹在下面。

我希望所有图片的大小相同(宽度 = 700 像素，高度 - 440 像素)，我已将其编码到我的 html 中，并且我希望此高度定义每个“部分”的大小。

我该怎么办

a) 将文本保持在左侧并且不在下方换行并且b) 阻止它聚集在一起？

我最初的想法是加入大量的换行符，但我觉得 .css 中必须有更简洁的方法吗？

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

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

自发布此消息以来，客户想要他们办公室的 Google map 而不是他们的个人资料照片，因此我对图片进行了轻微修改，但同样的问题仍然存在。我想要右边的 map 和左边的联系方式，并且我希望每三个客户将其分成不可见的“部分”。

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