固定高度元素具有適應文本內容的靈活寬度

我需要使我的每個浮動<p>元素的固定高度爲200px，但也具有響應寬度以適應所有文本內容。固定高度元素具有適應文本內容的靈活寬度

只是一定高度是固定的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/

這可能嗎？

來源

2013-06-20 Déjà Bond

爲什麼你在輸出設置400像素高度如果p高度應修復，你想「快速響應寬」？ –

@AlessandroGabrielli @AlessandroGabrielli不幸的是我沒有專注:(現在我編輯我的問題希望得到正確的答案 –

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

來源

2013-06-20 13:19:23

固定*高度*，靈活*寬度*。但你的例子似乎是解決方案 –

對不起，我添加了壞的例子，我想達到什麼，我想要的http://jsfiddle.net/Qet6p/4/靈活寬度 –

@JimmyTodd查看更新:) – 2013-06-20 15:06:17

使用min-width:150px？像here

再次，你是在談論

固定的200像素高度，但也有一個負責任的寬度以適應內的所有文本內容。

爲什麼在你的例子中，你改變的高度？

來源

2013-06-20 13:17:09

對不起，我添加了壞的例子，我想要達到什麼，我想要什麼http://jsfiddle.net/Qet6p/ 4 /靈活寬度 –

@JimmyTodd ok，gl –

試試這個

height:200px;

到

height:auto;

讓我知道這是有幫助的。

來源

2013-06-20 13:20:19

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

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

來源

2013-06-20 13:21:06

固定高度元素具有適應文本內容的靈活寬度

回答

相關問題