固定寬度和自動寬度的div在一行

Question

我有聊天窗口，我想把照片和消息放在照片旁邊。對話窗口必須能夠響應，並且消息格可以自動調整到屏幕上。但我找不到任何方法來做到這一點，因爲一旦信息有幾行文字，它就會下降到下一行。

如果我使用表格，我無法制作固定寬度的照片TD。如果我使用DIVS，我不能這樣做自動寬度消息DIV :)

這裏的jsfiddle一個例子： 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; 
} 

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/