플로팅 된 div 아래에 텍스트가 여전히 래핑되는 이유는 무엇입니까?

Question

일부 텍스트와 이미지를 렌더링하는 렌더링 구성 요소가 있습니다. 구성 요소는 두 div가 포함 된 DIV입니다. 첫 번째 div에는 이미지가 포함되어 있으며이 div는 오른쪽으로 플로팅됩니다. 다음 div는 다양한 텍스트 문자열을 포함합니다. 내가 오버플로 : 부모 div에 숨겨져 있지만 내 텍스트는 여전히 이미지를 포함하는 div 주위를 감싸고있다. 이 문제를 해결할 수있는 유일한 방법은 이미지가 포함 된 div의 높이를 100 %로 설정하는 것입니다. 그러나이 경우 전체 페이지를 확장하기 때문에이 div에 테두리/배경을 추가 할 수 없습니다.

간단히 말해서 div가 두 개 포함되어 있습니다. 내 텍스트를 한 칸에, 다른 한 이미지를 원한다. 나는 텍스트가 이미지 아래에 감싸는 것을 원하지 않는다. 다른 텍스트 배치 질문을 방문했지만 숨겨진 오버플로 또는 범위 태그 추가로 내 문제가 해결되지 않는 것 같습니다.

다음은 렌더링 기능과 함께 사용되는 SASS/CSS입니다.

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를

작동하도록되어 방법 float의

.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를 사용하는 대신 이라는 두 컨테이너를 width 설정에 따라 정의하거나 display: flex을 컨테이너 요소에 넣을 수 있습니다.

이미지 너비를 알면 이미지 컨테이너의 고정 너비에 사용하고 width: calc(100% - XXpx);과 같은 텍스트 컨테이너 너비에 calc을 사용할 수 있습니다. 여기서 XX는 이미지 너비를 나타냅니다.