固定高度的元素，具有靈活的寬度以適合內部的文本內容

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/