固定高度的元素，具有灵活的宽度以适合内部的文本内容

Question

我需要使每个浮动的 <p>元素都采用200px的固定高度，但也要具有响应宽度以适合内部的所有文本内容。

只要确保将高度固定为200px，并且如果内容较小且合适，则将当前宽度保持为150px即可。

您可以使用任何这些语言作为解决方案（CSS，Javascript （或jQuery） ，PHP）

当前代码

的CSS

p{
    width:150px;
    height:200px;
    float:left;
    background-color:#F0F0F0;
    margin:10px;
    padding:10px;
    font-size:17px
}

span{
    font-size:21px;
    color:red
}

的HTML

<p><b>Lorem ipsum dolor sit amet</b>, consectetur adipiscing elit. <b>Duis pharetra</b> quis dui a laoreet. Proin nibh dolor, faucibus sit <span>amet aliquet ac, varius id eros.</span></p>

<p><b>Lorem ipsum dolor sit amet</b>, consectetur adipiscing elit. Duis pharetra quis dui a laoreet. Proin nibh dolor, faucibus sit amet aliquet ac, varius id eros. <b>Cras vitae orci in felis blandit elementum</b>. Mauris scelerisque mauris ante, <span>sed interdum tellus tincidunt id.</span> Cras ullamcorper vestibulum dolor quis pharetra. Phasellus quis dictum massa, <span>sit amet cursus lorem.</span></p>

<p>Lorem ipsum dolor sit amet, <b>consectetur adipiscing elit.</b> Duis pharetra quis dui a laoreet. Proin nibh dolor, faucibus sit amet aliquet ac, varius id eros. Cras vitae orci in felis blandit elementum. Mauris scelerisque mauris ante, sed interdum tellus tincidunt id.</p>

检查并尝试jsfiddle中的代码

http://jsfiddle.net/Qet6p/

这是我想达到的输出

http://jsfiddle.net/Qet6p/4/

这可能吗？

Answer 1

工作jsFiddle演示

为您的p元素设置min-height而不是height ：

p {
    width: 150px;
    min-height: 200px;
    float: left;
    background-color: #F0F0F0;
    margin: 10px;
    padding: 10px;
    font-size: 17px;
}

---

工作jsFiddle演示

要获得灵活的宽度，请尝试以下JS代码：

$(function () {
    function checkHeight() {
        $('p').each(function () {
            var $p = $(this);
            var height = $p.height();

            if (height > 200) {                
                $p.css('width', '+=10');
                checkHeight();
            }
        });
    }

    checkHeight();
});

Answer 2

使用min-width:150px ？ 像这里

再说一遍，你在谈论

固定高度为200像素，但也具有响应宽度，以适合内部的所有文本内容。

为什么在您的示例中您更改了高度？

Answer 3

尝试这个

 height:200px;

至

 height:auto;

让我知道这有帮助。

Answer 4

您可以为此使用display:table-row and table-cell property ，

小提琴 http://jsfiddle.net/Qet6p/3/