使用css的不均匀柱

sh7euo9m 于 2022-10-24 发布在 WordPress

关注(0)|答案(1)|浏览(241)

此问题引用此页面：2-Column Team Page

注意：我不得不删除一些链接，因为我是新来这个网站的。请看样本页。

我使用的是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

{浮动：右；宽度：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>标记的其他方法，但结果更差。

wordpress

来源：https://stackoverflow.com/questions/16260721/uneven-columns-using-css

1条答案

按热度按时间

zbdgwd5y1#

用类column-wrap Package 每个左右内容，即.left和.right元素将用column-wrap Package 。重复.column-wrap块。请参见fiddle。

超文本标记语言

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

赞(0）回复(0）举报 2022-10-24

我来回答

使用css的不均匀柱

1条答案

相关问题

热门标签

最新问答