使用 CSS 的不均匀列答案

【问题标题】：Uneven Columns using CSS使用 CSS 的不均匀列
【发布时间】：2013-04-28 07:37:03
【问题描述】：

这个问题参考这个页面：2-Column Team Page

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

我正在使用 WordPress 3.5.1 和 Poloray 主题。

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

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

我找到的代码是：

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

{ 浮动：对；宽度：65%；填充：1%； }-->

<p style="text-align: left;"><strong>Leadership</strong></p>
<p>
<div id="columns">
<div class="left column"><figure><a href="http://anicon2a.anicondev.com//?page_id=467 "><img class="alignnone" title="Vishal  415-894-5509 | vishal@anicon-group.com" alt="Vishal-Resume-Photo" src="**IMAGE LINK**" width="70" height="70" /></a>
<figcaption>Vishal Parikh</figcaption></figure></div>
<div class="right column">Ex prompta apeirian nam, vix an rebum partem. Has pertinax gubergren necessitatibus eu, tamquam accommodare concludaturque eu eumsed cu...
<a href="**BIO PAGE LINK**">Learn more about Vishal</a></div>
</p>
<p>
<div class="column"><figure><a href="**BIO PAGE LINK**"><img class="alignnone" title="Richard 415-894-5255 | richard@anicon-group.com" alt="Richard Targett" src="**IMAGE LINK**" width="70" height="70" /></a>
<figcaption>Richard Targett</figcaption></figure></div>
<div class="right column">Rick has more than 20 years of experience leading efforts in financial services and entrepreneurial ventures including 12 years in capital markets with a global Wall Street investment banking firm, 10 years in senior role for a big 4 firm...
<a href="http://anicon2a.anicondev.com/?page_id=473">Learn more about Rick</a></div>
</p>

div 为每个人重复。我玩过宽度、位置（相对与绝对），使第二个 div 以“.column”类与“left-column”开头。似乎没有任何效果。

这个解决方案最接近给我想要的效果。我尝试了使用<li> 标签的其他方法，但结果更糟。

请帮忙。

【问题讨论】：

请结构化代码并确保所有行的开头至少有四个空格才能正确显示。此外，一个最小的示例会导致更多的答案，因为很难理解非结构化和混乱的代码。

标签： css wordpress two-columns

【解决方案1】：

使用类为column-wrap 的元素包装每个左右内容，即.left 和.right 元素将使用column-wrap 包装。重复 .column-wrap 块。见fiddle。

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>

CSS

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

【讨论】：