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

I'd like to create a thread view (CHAT inbox) like UI using HTML and CSS.

我想使用HTML和CSS创建一个像UI这样的线程视图(CHAT收件箱)。

http://jsfiddle.net/7mbaksvj/

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.

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

I'm using two classes .bubble-right and .bubble-left to align them using margins.

我正在使用两个类.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%;
}

When CSS float property is used to align left and right, width is proper, but all my divs are getting aligned in a single row.

当CSS浮动属性用于左右对齐时,宽度是正确的,但我的所有div都在一行中对齐。

I'm looking for a solution in CSS and HTML.

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

5 个解决方案

#1

You should add the background-color to the P inside your .bubble-(left|right)

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

I.E.:

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

#2

display: inline-block; is your answer here, but you need a way of keeping the blocks from lining up on a row. I would wrap each .bubble-left and .bubble-right in another div, then:

display:inline-block;这是你的答案,但是你需要一种方法来阻止块排成一排。我会将每个.bubble-left和.bubble-right包装在另一个div中,然后:

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

Edit

Oh, also on .bubble-right, on each container div, add text-align: right;.

哦,也在.bubble-right上,在每个容器div上添加text-align:right;。

#3

The trick is to float the bubbles to the left or right depending on their class, and importantly clearing the floats on the parent. Do not give a fixed width or margin of 20% as you have given. Just give a max-width of 80% to keep it within limits.

诀窍是根据他们的类别向左或向右浮动气泡,并且重要的是清除父母上的浮动。不要像你给出的那样给出20%的固定宽度或边距。只需给出80%的最大宽度即可将其保持在限制范围内。

This is how you could do it: (Demo Fiddle http://jsfiddle.net/abhitalks/hL5z0f37/)

这就是你可以做到的:(演示小提琴http://jsfiddle.net/abhitalks/hL5z0f37/)

Snippet: (only relevant portions of code)

代码段:(仅代码的相关部分)

* { 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>

#4

To make left bubbles look like you want you can make them float: left. For right ones you should float them right. For all bubbles you should use max-width: 80% and use clear: both.

要让左边的气泡看起来像你想要的那样你可以让它们漂浮:左。对于正确的你应该漂浮他们。对于所有气泡,您应该使用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%;
}

Demo: http://jsfiddle.net/7mbaksvj/8/

#5

You can use display:table; to make width of elements is following the content inside and make element float:right / float:left and use clear:both; to make sure next element in the next line

你可以使用display:table;使元素的宽度跟随内容并使元素浮动:右/浮动:左并使用clear:both;确保下一行中的下一个元素

Demo : jsFiddle

example for right content :

正确内容的示例:

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