如何基于其子宽度设置div的宽度？

本文介绍了如何基于其子宽度设置div的宽度？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我想使用HTML和CSS创建一个线程视图（CHAT收件箱），如UI。 I'd like to create a thread view (CHAT inbox) like UI using HTML and CSS. http://jsfiddle.net/7mbaksvj/ 我的问题是div的宽度。它以固定宽度来。但我想要它是自动的，基于内容的内容的长度，并能够增长到最大的宽度的80％。 My issue is the width of the div. It's coming as a fixed width. But I want it to be auto, based on the length of the content inside, and able to grow to a max of 80% of the width. 我使用两个类 .bubble-right 和 .bubble-left 使用边距对齐它们。I'm using two classes .bubble-right and .bubble-left to align them using margins..bubble-left { margin-top: 1%; margin-right: 20%; position: relative; color: #000; padding: 5px 20px 5px 20px; background: #D5D9DB; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}.bubble-left:after { content: ''; position: absolute; border-style: solid; border-width: 12px 17px 12px 0; border-color: transparent #D5D9DB; display: block; width: 0; z-index: 1; margin-top: -12px; left: -17px; top: 60%;}.bubble-right { margin-top: 1%; position: relative; color: #fff; margin-left: 20%; padding: 5px 20px 5px 20px; background: #5EC979; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}.bubble-right:after { content: ''; position: absolute; border-style: solid; border-width: 12px 0 12px 17px; border-color: transparent #5EC979; display: block; width: 0; z-index: 1; margin-top: -12px; right: -17px; top: 60%;} 当CSS float属性用于左右对齐 我在寻找 a 。 推荐答案你应该在.bubble- You should add the background-color to the P inside your .bubble-(left|right) IE：.bubble-left, .bubble-right { position: relative; clear: both; padding: 0 17px; overflow: hidden; margin-top: 1%;}.bubble-left { margin-right: 20%;}.bubble-right { margin-left: 20%;}.bubble-left p, .bubble-right p { color: #000; padding: 5px 20px; line-height: 24px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; width: auto; display:inline-block; margin: 0;}.bubble-left p { background: #D5D9DB; float: left;}.bubble-right p { background: #5EC979; float: right;}.bubble-left:after, .bubble-right:after { content: ''; position: absolute; border-style: solid; display: block; width: 0; z-index: 1; margin-top: -12px; top: 50%;}.bubble-left:after { left: 0; border-width: 12px 17px 12px 0; border-color: transparent #D5D9DB;}.bubble-right:after { right: 0; border-width: 12px 0 12px 17px; border-color: transparent #5EC979;} 这篇关于如何基于其子宽度设置div的宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！