Неровные Столбцы с помощью CSS

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 

{поплавок: право; ширина: 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 старшим с классом «.column» против «left-column». Ничто не работает.

Это решение является самым близким к тому, чтобы дать мне желаемый эффект. Я пробовал другие подходы, используя тег <li>, но результаты были хуже.

Пожалуйста, помогите.

Answer 1

Wrap каждое левое и правое содержание с элементом с классом сказать 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; 
}