-2

这个问题参考了这个页面：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>标签的其他方法，但结果更糟。

请帮忙。

4

1 回答 1

0

用一个带有类的元素包装每个左右内容，比如column-wrapie.left并且.right元素将用column-wrap. 重复该.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>

CSS

#columns .column-wrap {
    overflow:hidden;
}
于 2013-04-28T08:59:06.407 回答