浮動小数点型のdivの下にテキストが折り返しているのはなぜですか？

Question

私はテキストとイメージをレンダリングするレンダーコンポーネントを持っています。コンポーネントは、2つのdivを含むDIVです。最初のdivにはイメージが含まれ、このdivは右側に浮動します。次のdivにはさまざまなテキスト文字列が含まれています。私はオーバーフローがあります：親divには隠されていますが、私のテキストはまだ画像を含むdivを囲んでいます。私がこれを修正できる唯一の方法は、イメージを含むdivの高さを100％に設定することです。しかし、私がこれを行うと、ページ全体が拡張されるため、このdivに枠線や背景を追加することはできません。

つまり、divには2つのdivが含まれています。私は、私のテキストを列に、イメージをもう片方にしたい。私はテキストが画像の下に折り返されないようにします。私は他のテキストラッピングの質問を訪問しましたが、隠れたオーバーフローやスパンタグの追加は私の問題を解決するようには見えません。

以下は、レンダリング機能とそれに付随するSASS/CSSです。その周りにテキスト "フロート" - floatが動作するようになっている方法です

render() { 
     const renderHelpFile = this.props.data.filter(obj => { 
      return this.props.name === obj.name; 
       }).map((obj, idx) => { 
       return (
        <div key={idx} className="fadingDiv"> 
         <div className="divImg"> 
          <img src={`${obj.image}`} className="helpFileImg"></img><br /> 
         </div> 
         <div className="displayLineBreak"> 
          <h3 style={upperStyle}> {obj.name} </h3> 
          <b>Path:</b> {obj.path} <br /><br /> 
          {obj.content} <br /><br /> 
          <b>Troubleshooting:</b> {obj.troubleshoot} <br /><br /> 
          <b>Video:</b> {obj.video} <br /> 
         </div> 
        </div> 
       ); 
     }); 

CSS

.fadingDiv { 
    text-align: justify; 
    overflow:hidden; 

    -webkit-animation: divFadeIn .75s ease-in forwards; 
    animation: divFadeIn .75s ease-in forwards; 
} 

.displayLineBreak { 
    white-space: pre-line; 
} 

.divImg { 
    width: 35%; 
    float: right; 
    padding: 5px; 
    background: #0080ff; 
    border: 2px solid black; 
    border-radius: 2px; 
    //height: 100%; 
} 

.helpFileImg { 
    width: 100%; 
    height: auto; 
} 

Answer 1

。

floatを使用する代わりに、両方のコンテナをinline-blockとして定義し、widthの設定に従って指定するか、display: flexをコンテナ要素に配置できます。

イメージの幅がわかっている場合は、イメージコンテナの固定幅に使用し、width: calc(100% - XXpx);などのテキストコンテナの幅にはcalcを使用します。ここで、XXはイメージの幅を表します。