文本溢出Div

Question

上面的屏幕截圖顯示了問題。與其他類似問題不同，我不需要爲國際文本工作。我需要它來適應不同的屏幕尺寸和不同數量的文本。文本將來自生產中的數據庫，所以我不能簡單地找出div需要提前下降的斷點。

我正在尋找的解決方案將首先移動圖像下方的文本塊，然後根據需要垂直調整文本div的大小以容納所有文本。 JS或CSS解決方案都很好。下面

HTML：

<div class="product"> 
    <img class="productImg" src="http://placehold.it/300x240"> 
    <div class="productTxt"> 
     <h1>Title</h1> 
     <h3>Price</h3> 
     <p>Suspendisse sed fermentum neque, vel rutrum velit. Curabitur eget dolor luctus, sodales felis sed, dapibus justo. 
     Suspendisse in condimentum ante. Sed nec dui tristique, sollicitudin velit eget, ultricies dui. 
     Ut rhoncus ornare urna, quis venenatis velit ornare eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
     Etiam ornare sem finibus lectus volutpat, in feugiat elit ultrices. In sed vulputate eros, quis volutpat elit. 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nisi libero, posuere nec laoreet quis, viverra et lorem. Duis odio ante, efficitur et felis at, tincidunt interdum ante. 
     Quisque vestibulum eu est a egestas. Nunc hendrerit rutrum dui at cursus. Aliquam mollis nec magna ac mattis. 
     Nam nec est tincidunt leo facilisis finibus non nec mauris. Vestibulum rutrum tristique tincidunt. </p> 
    </div> 
</div> 

CSS：

.product { 
    box-sizing: border-box; 
    margin: 0px; 
    padding: 10px; 
    width: 100%; 
    height: 330px; 
    border-bottom: 2px solid #16A085; 
} 

.productImg { 
    width: 240px; 
    height: 300px; 
    display: inline-block; 
    position: relative; 
} 

.productTxt { 
    box-sizing: border-box; 
    vertical-align: top; 
    display: inline-block; 
    height: 100%; 
    width: calc(100% - 270px); 
    padding: 10px; 
    text-align: center; 
    position: relative; 
    border: 2px solid blue; 
} 

我真的不能刪除從productTxt DIV的相對位置沒有打破另一個元素是同一div內的定位（在這個例子中我爲了簡單起見刪除了它）

Answer 1

刪除父div的.product的固定高度並添加一個min-width至.productTxt。如果您使用100%代替width或height，它是相對於父div，並且您必須專門設置父代的width或height。這就是爲什麼你的height: 100%在.productTxt並沒有根據你的內容而改變，而是被固定爲父部門.product的height: 330px。

.product { 
    box-sizing: border-box; 
    margin: 0px; 
    padding: 10px; 
    width: 100%; 
    border-bottom: 2px solid #16A085; 
} 

.productTxt { 
    box-sizing: padding-box; 
    vertical-align: top; 
    display: inline-block; 
    height: 100%; 
    width: calc(100% - 270px); 
    min-width: 220px; /* change this to what you want */ 
    padding: 10px; 
    text-align: center; 
    position: relative; 
    border: 2px solid blue; 
} 

Answer 2

要移動圖像下方的文本塊從.productTxt類中刪除display: inline-block;。 如果你想保留的.product級修補高度然後根據.product類調​​整.productTxt高度，給CSS overflow: auto;到.productTxt你的數據將滾動屏顯示，讓你的HTML是

<div class="product"> 
    <img class="productImg" src="http://placehold.it/300x240"> 
    <div class="productTxt"> 
     <h1>Title</h1> 
     <h3>Price</h3> 
     <p>Suspendisse sed fermentum neque, vel rutrum velit. 
      Curabitur eget dolor luctus, sodales felis sed, dapibus 
      justo.Suspendisse in condimentum ante. Sed nec dui 
      tristique,sollicitudin velit eget, ultricies dui. 
      Ut rhoncus ornare urna, quis venenatis velit ornare eu.  
      Pellentesque habitant morbi tristique senectus et netus et 
      malesuada fames ac turpis egestas. 
      Etiam ornare sem finibus lectus volutpat, in feugiat elit 
      ultrices. In sed vulputate eros, quis volutpat elit. 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Suspendisse nisi libero, posuere nec laoreet quis, viverra 
      et lorem. Duis odio ante, efficitur et felis at, tincidunt 
      interdum ante. 
      Quisque vestibulum eu est a egestas. Nunc hendrerit rutrum 
      dui at cursus. Aliquam mollis nec magna ac mattis. 
      Nam nec est tincidunt leo facilisis finibus non nec 
      mauris.Vestibulum rutrum tristique tincidunt. 
     </p> 
     </div> 
</div> 

和你的CSS將是

.product { 
    box-sizing: border-box; 
    margin: 0px; 
    padding: 10px; 
    width: 100%; 
    height: 550px; 
    border-bottom: 2px solid #16A085; 
} 

.productImg { 
    width: 240px; 
    height: 300px; 
    display: inline-block; 
    position: relative; 
} 

.productTxt { 
    box-sizing: border-box; 
    vertical-align: top; 
    height: 230px; 
    width: calc(100% - 270px); 
    padding: 10px; 
    text-align: center; 
    position: relative; 
    border: 2px solid blue; 
    overflow: auto; 
}