I'd like to create a thread view (CHAT inbox) like UI using HTML and CSS.
我想使用HTML和CSS创建一个像UI这样的线程视图(CHAT收件箱)。
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
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
0
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
0
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
0
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
0
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%;
}
#1
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
0
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
0
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
0
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
0
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%;
}