한 줄에 고정 너비 및 자동 너비 div가 있습니다.

Question

사진 옆에 사진과 메시지를 넣고 싶은 대화 창이 있습니다. 대화 창이 응답해야하며 메시지 div가 화면에 자동 조절 가능해야합니다. 그러나 일단 메시지에 몇 줄의 텍스트가 있으면 다음 줄로 떨어지기 때문에 어떤 방법으로도이를 찾을 수 없습니다.

테이블을 사용하는 경우 고정 너비 사진 TD를 만들 수 없습니다. https://jsfiddle.net/s95tdcLw/3/

HTML :

<div class="receiver"> 
    <div class="receiverPhoto"></div> 
    <div class="receiverMessage"> 
    Lorem ipsum dolor sit 
    </div> 
</div> 

<div class="receiver"> 
    <div class="receiverPhoto"></div> 
    <div class="receiverMessage"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et mauris eget est maximus condimentum nec a turpis. 
    </div> 
</div> 

<div class="receiver"> 
    <div class="receiverPhoto"></div> 
    <div class="receiverMessage"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et mauris eget est maximus condimentum nec a turpis. Nulla nulla est, feugiat vitae posuere et, efficitur ac justo. Suspendisse pulvinar, urna quis vehicula malesuada, lorem lacus luctus odio, 
    eu mattis nisi turpis vel lectus. 
    </div> 
</div> 

CSS :

.receiver { 
    clear: both; 
    padding-top: 1rem; 
} 

.receiverPhoto { 
    float: left; 
    width: 40px; 
    height: 40px; 
    background: blue; 
    border-radius: 20px; 
} 

.receiverMessage { 
    float: left; 
    width: auto; 
    background: rgb(230, 230, 230); 
    border-radius: 10px; 
    margin-left: 0.5rem; 
    padding: 10px; 
} 

내가 div를 사용하는 경우, 나는

여기

이 예제 JSFiddle입니다 자동 폭 메시지 DIV :)를 할 수 없다

Answer 1

float 설정을 그대로두고 대신 다음을 사용하십시오.

.receiver { 
    position: relative; 
} 

.receiverPhoto { 
    position: absolute; 
    left: 0; 
} 

.receiverMessage { 
    margin-left: 45px; 
} 

jsFiddle

Answer 2

귀하의 .receiverMessage 요소는 떠 안되며, 그것은 .receiverPhoto 요소의 왼쪽 여백 공간을 확보해야한다.

.receiverMessage { 
    /* should not float */ 
    width: auto; 
    background: rgb(230, 230, 230); 
    border-radius: 10px; 
    margin-left: 50px; /* reserve space of .receiverPhoto width */ 
    padding: 10px; 
} 

는 포크 바이올린 참조 : https://jsfiddle.net/092b077c/ 어떻게 반대를 위해 작동하게하는 귀하의 코멘트에 대한 응답으로

---

...

이

나는 포장 DIV에 클래스를 사용하십시오 요소를 사용하여 메시지 유형을 판별하십시오. 내 예제에서는 새로운 클래스 .sender을 소개합니다. 지금은 사진 요소가 왼쪽 또는 오른쪽 수레 여부를 결정하고 네 개의 선택기를 만들 메시지 요소는 왼쪽 또는 오른쪽 패딩 여부 :

새로운 CSS :

.sender .receiverPhoto { 
    float: right; 
} 
.sender .receiverMessage { 
    margin-right: 50px; 
} 

.receiver .receiverPhoto { 
    float: left; 
} 
.receiver .receiverMessage { 
    margin-left: 50px; 
} 

HTML :

<div class="sender"> 
    <div class="receiverPhoto"></div> 
    <div class="receiverMessage">...</div> 
</div> 

이제 .receiverPhoto 및 .receiverMessage 스타일은 여백 또는 부동을 선언 할 필요가 없습니다.

업데이트 된 피들보기 : https://jsfiddle.net/092b077c/1/