Question

我有一个由图像和blockquote组成的项目列表。我一直在尝试将图像宽度设置为设置的最大宽度。然后尝试通过图像侧自动使blockquote适合。同时保持两个元素垂直对齐中心。

我有一些问题，如果有人可以提供帮助，我会感激不尽。 jsFiddle

HTML

<ul>
    <li>
    <div><img src="http://placehold.it/180x100"></div>
    <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec magna elit. Suspendisse nec enim lacus. Aenean semper ipsum in faucibus blandit. Duis auctor ornare viverra. – Person</p></blockquote>
    </li>    
    <li>
    <div><img src="http://placehold.it/146x16"></div>
    <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec magna elit. Suspendisse nec enim lacus. Aenean semper ipsum in faucibus blandit. Duis auctor ornare viverra. – Person</p></blockquote>
    </li>    
</ul>

CSS

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
ul li {
    width: 100%;
    position: relative;
    float: left;
    padding: 0 0 30px;
}
ul li div {
    width: 200px;
    position: relative;
    float: left;
    height: 100%;
    max-height: 100%;
    display:table-cell;
    vertical-align: middle;
}
ul li img {
    display:table-cell;
    vertical-align: middle;
}
ul li blockquote {
    color: #999;
    float: right;
    font-style: italic;
    margin: 0;
    width: 70%;
}
ul li blockquote p {
    margin: 10px 0;
}

Answer 1

我已移除float，因此可以垂直对齐。请查看此http://jsfiddle.net/NLCnk/3/

Answer 2

如果您使用flexbox是一个选项，请查看http://jsfiddle.net/dcsturm/ypxud/

更新了小提琴，因为我已经覆盖了请求的宽度方面。

如果您想了解更多关于这个非常棒的技术：http://philipwalton.github.io/solved-by-flexbox/

CSS垂直对齐图像和blockquote以及自动宽度blockquote

2 个答案: