将CSS用于具有不同垂直高度的结果列表

Question

我希望制作一个如下所示的结果列表：

我过去常常用表格做回来，但总是很难弄清楚如何用css做这件事。如果描述真的很长，如何防止它在图像和名称/标题下包裹怎么办？ CSS中的这一点似乎比表格更难，但也许我只是遗漏了一些东西。我知道桌子没有响应，这就是我喜欢用div做的原因。我无法阻止文字的包装。

我的HTML是这样的：

            <div class="speaker">

            <div class="speaker-photo">

            <img src="<?php echo $image[0]; ?>" />
            <div class="speaker-name"><?php echo $first_name .' '.$last_name; ?></div>
            <div class="speaker-title"><?php echo $title; ?></div>  

            </div>

            <div class="bio"><?php echo $bio ?></div> 

            </div>

            <br style="clear:both;"/>

，CSS是：

.speaker {
    margin-bottom: 33px;
}

.speaker-photo  {
    float:left;
    width: 25%;
}

.speaker-photo img {
    max-width: 170px;
    height:auto;
}

.speaker-bio {
    max-width:600px;

}

谢谢！

Answer 1

最干净的方法是将副内容和主要内容嵌入到另一个元素中，使用固定宽度浮动“侧边栏”，并为主元素提供足够的填充以纠正它。 See working Fiddle here。请注意，如果右侧的帖子比侧边栏短，则可能会导致凌乱的clear。

或者，如果向后兼容性为Flexbox，您也可以使用not an issue，它不会出现浮动所带来的clear问题。

如果您确定内容总是比侧边栏长，例如通过min-height，您当然可以使用position:absolute来定位侧边栏，并为正确的元素添加边距'gutter'。