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

Question

我想使用HTML和CSS创建一个类似UI的线程视图（CHAT收件箱）。

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-（左|右）

中的P.

即：

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