0

我需要让我的每个浮动 <p>元素都采用 200 像素的固定高度，但也有一个响应宽度以适应里面的所有文本内容。

只要确保高度固定为 200 像素，如果内容小而合适，只需保持当前宽度 150 像素。

您可以使用这些语言中的任何一种来解决问题（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/

这可能吗？

4

4 回答 4

3

工作 jsFiddle 演示

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

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();
});
于 2013-06-20T13:19:23.530 回答
0

使用min-width:150px? 喜欢这里

再说一次，你在谈论

固定高度为 200 像素，但也有一个响应宽度以适应里面的所有文本内容。

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

于 2013-06-20T13:17:09.770 回答
0

试试这个

 height:200px;

到

 height:auto;

让我知道这是否有帮助。

于 2013-06-20T13:20:19.140 回答
0

你可以用display:table-row and table-cell property这个，

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

于 2013-06-20T13:21:06.270 回答