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

Question

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

只需确保高度固定为 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

Working jsFiddle Demo

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

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

---

Working jsFiddle Demo

对于灵活宽度，试试这个JS代码:

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

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

    checkHeight();
});