固定宽度和自动宽度的div在一行

我有聊天窗口，我想把照片和消息放在照片旁边。对话窗口必须能够响应，并且消息格可以自动调整到屏幕上。但我找不到任何方法来做到这一点，因为一旦信息有几行文字，它就会下降到下一行。固定宽度和自动宽度的div在一行

如果我使用表格，我无法制作固定宽度的照片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; 
}

来源

2016-11-06 Gediminas

保留float设置，请改用这些设置：

.receiver { 
    position: relative; 
} 

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

.receiverMessage { 
    margin-left: 45px; 
}

jsFiddle

来源

2016-11-06 07:51:39 Itay

我有一个问题，照片是在右侧。我不能使用正确的：0，因为对话div是在另一个最大宽度的div里面：1000px，所以它漂浮在窗口的右侧太多:) – Gediminas

创建一个小提琴，我会看看你能做什么 – Itay

这里是！对不起，我没有赶上从一开始 - https://jsfiddle.net/s95tdcLw/5/ – Gediminas

你.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/

来源

2016-11-06 07:51:59

谢谢，它的作品！ – Gediminas

它适用于左侧照片的版本，但当照片处于正确的位置时，我无法处理要执行的操作。 – Gediminas

固定宽度和自动宽度的div在一行

回答

相关问题