如何根据子宽度设置 div 的宽度？

Question

我想创建一个线程视图（聊天收件箱），如使用 HTML 和 CSS 的 UI。

http://jsfiddle.net/7mbaksvj/

我的问题是 div 的宽度。它以固定宽度出现。但我希望它是自动的，基于内部内容的长度，并且能够增长到最大宽度的 80%。

我正在使用 .bubble-right 和 .bubble-left 两个类来使用边距对齐它们。

.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 浮动属性用于左右对齐时，宽度是合适的，但 我所有的 div 都对齐在一行中。

我正在寻找 CSS 和 HTML 的解决方案。

Answer 1

您应该将背景颜色添加到 .bubble-(left|right) 中的 P

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;
}

Answer 2

display: inline-block; 是您的答案，但您需要一种方法来防止积木排成一排。我会将每个 .bubble-left 和 .bubble-right 包装在另一个 div 中，然后：

.bubble-right, .bubble-left { ... display: inline-block; ... }

编辑

哦，同样在.bubble-right，在每个容器上div，添加text-align: right;。

Answer 3

诀窍是根据类别将气泡向左或向右浮动，重要的是清除父级上的浮动。不要像您给出的那样给出 20% 的固定宽度或边距。只需提供 80% 的 max-width 即可将其保持在限制范围内。

你可以这样做：(Demo Fiddle http://jsfiddle.net/abhitalks/hL5z0f37/)

片段：（仅相关代码部分）

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
.container {
    background-color: #eee; 
    margin: 8px; 
    height: 80%; width: 50%; /* this height and width is only for demo snippet */
    overflow: auto;
}

.bubble { width: 100%; clear: both; } /* clear the floats here on parent */
.bubble p {
    border-radius: 5px;
    padding: 8px; margin: 8px 12px;
    max-width: 80%;  /* this will make it not exceed 80% and then wrap */
    position: relative;
}
.left p { background-color: #ccc; float: left; } /* floated left */
.right p { background-color: #3c3; float: right; } /* floated right */

/* classes below are only for arrows, not relevant */
.left p::before {
    content: ''; position: absolute;
    width: 0; height: 0; left: -8px; top: 8px;
	border-top: 4px solid transparent;
	border-right: 8px solid #ccc;
	border-bottom: 4px solid transparent;
}
.right p::after {
    content: ''; position: absolute;
    width: 0; height: 0; right: -8px; bottom: 8px;
	border-top: 4px solid transparent;
	border-left: 8px solid #3c3;
	border-bottom: 4px solid transparent;
}

<div class="container">
    <div class="bubble left"><p>msg</p></div>
    <div class="bubble left"><p>long message</p></div>
    <div class="bubble right"><p>ultra long message which can wrap at eighty percent </p></div>
    <div class="bubble left"><p>lorem ipsum</p></div>
    <div class="bubble right"><p>very long message</p></div>    
</div>

Answer 4

要使左侧气泡看起来像您想要的那样，您可以将它们设为float: left。对于正确的，您应该将它们正确浮动。对于所有气泡，您应该使用max-width: 80% 和clear: both。

.bubble-left {
    margin-top: 1%;
    margin-left: 10px;
    position: relative;
    color: #000;
    padding: 5px 20px 5px 20px;
    background: #D5D9DB;
    border-radius: 10px;
    float: left;
    clear: both;
    max-width: 80%;
}

演示：http://jsfiddle.net/7mbaksvj/8/

Answer 5

您可以使用display:table; 使元素的宽度跟随里面的内容，并使元素float:right / float:left 并使用clear:both; 确保下一行中的下一个元素

演示：jsFiddle

正确内容示例：

.bubble-right {
    margin-top: 1%;
    position: relative;
    display:table; /* make display as table */
    float:right;   /* set float right */
    clear:both;    /* clear both */
    pading-right: 16px; /* add padding */
}

.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: -19px;  /* re-positioning */
    right: 0px;       /* remove right position */
    top: 60%;
}