使用CSS的不均匀列

此问题引用此页面：

注意：我必须删除一些链接，因为我是这个网站的新手。请查看示例页面。

我正在使用WordPress 3.5.1和Poloray主题

我正在组织中创建一个合作伙伴页面。该设计需要两列：左栏有一个图像，右栏有一个个人简历页面的摘录。将鼠标悬停在图像上会显示联系人信息（这很好）

我已经尝试了好几天来实现在主题中生成2列的代码。当我创建一个左/右列对时，所有内容都对齐。但是，一旦我为下一个人复制了代码，第二个生物摘录就会被向下推

我找到的代码是：

 <style><!--#columns { width: 600px; }  #columns .column { position: relative; width: 46%; padding: 1%;  }  #columns .left { float: left; width: 30%; padding: 1%;  }  #columns .right   

领导力


维沙尔·帕里克
不结盟运动前的承诺，不结盟运动后的承诺。古伯格伦佩蒂纳克斯酒店、塔姆夸酒店和塔姆夸酒店是否已在欧洲上市。。。


理查德·塔吉特
Rick在金融服务和创业投资领域拥有20多年的领导经验，包括在全球华尔街投资银行公司的资本市场工作12年，在四大公司担任高级职务10年。。。

对每个人重复div。我已经玩了宽度，位置（相对与绝对），使第二个div开始“.column”类与“left column”。似乎什么都不管用

这个解决方案最接近我想要的效果。我尝试了使用

标记的其他方法，但结果更糟

---

请提供帮助。

使用一个类的元素来包装左右两侧的内容，例如

列包装

，即

。左侧

和

。右侧

元素将使用

列包装

进行包装。重复

.column wrap

块。看

HTML

<div id="columns">
    <div class="column-wrap">
        <div class="left column">
          <!--left content-->
        </div>
        <div class="right column"> 
          <!--right content-->
        </div>
    </div>
    <div class="column-wrap">
        <div class="left column">
          <!--left content-->
        </div>
        <div class="right column"> 
          <!--right content-->
        </div>
    </div>
</div>

---

请组织代码，并确保所有行的开头至少有四个空格，以便正确显示。此外，由于很难理解非结构化和复杂的代码，因此通过一个简单的示例可以得到更多的答案。

<div id="columns">
    <div class="column-wrap">
        <div class="left column">
          <!--left content-->
        </div>
        <div class="right column"> 
          <!--right content-->
        </div>
    </div>
    <div class="column-wrap">
        <div class="left column">
          <!--left content-->
        </div>
        <div class="right column"> 
          <!--right content-->
        </div>
    </div>
</div>

#columns .column-wrap {
    overflow:hidden;
}