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

<强> Working jsFiddle Demo

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

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();
});

Answer 2

使用min-width:150px？比如here

再一次，你在谈论

固定高度为200px，但也具有适应所有的响应宽度里面的文字内容。

为什么在你的例子中你改变了高度？

Answer 3

试试这个

 height:200px;

到

 height:auto;

让我知道这有用。

Answer 4

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

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

固定高度元素，宽度灵活，适合文本内容

4 个答案: