Question

此问题引用此页面：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

{float：right;宽度：65％;填充：1％; } - GT;

<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>标记的其他方法，但效果更差。

请帮助。

Answer 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;
}

使用CSS的不均匀列

1 个答案: