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

は、私は本当に（同じdiv要素内にある別の要素の位置を壊すことなくproductTxt div要素からの相対的な位置を削除することはできません

Answer 1

親divの固定高さを削除して、.productを追加します。 min-width〜.productTxt。 をwidthまたはheightに使用する場合は、親divとの相対的な関係にあり、親のwidthまたはheightを具体的に設定する必要があります。あなたのコンテンツに基づいてheight: 100%の.productTxtが変更されず、親Div .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;を除去します。 あなたはとてもあなたの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クラスに応じ.productTxtの高さを調整し、.productTxtにCSS overflow: auto;を与える.productクラスの修正の高さを維持したい場合

.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; 
}