根据内部div内容宽度更改边框宽度 [英] Border width to change as per the inner div content width

问题描述

 < div class =panel-body chat-box 
 - 主> 
< div class =chat-box-left>您好，欢迎！您可以问我关于合规政策的
问题。< / div> 
< div class =chat-box-name-left> 
< img src =compiler-bot-static.gifalt =引导聊天框用户图像
 class =img-circle> -  Bot 
< / div> 
< hr class =hr-clas> 
 
 
 
< div class =chat-box-rightid =chatbox>嗨< / div> 
< div class =chat-box-name-right> 
< img src =smiley.jpgalt =引导聊天框用户图片
 class =img-circle> 
< / div> 
< div class =chat-box-left> Hello< / div> 
< div class =chat-box-name-left> 
< img src =compiler-bot-static.gifalt =引导聊天框用户图片
 class =img-circle>  -  Bot 
< / div> ; 
< / div> 
  

我的CSS如下。

  .hr-clas {
 border-top：1px solid＃A12EB3; 
} 
 
 .chat-box-main {
 height：400px; 
 overflow-y：auto; 
} 
 
 .chat-box-div {
 border：2px solid＃A12EB3; 
 border-bottom：2px solid＃A12EB3; 
} 
 
 .chat-box-head {
 padding：10px 15px; 
 border-bottom：2px solid＃A12EB3; 
背景颜色：＃B25AE5; 
颜色：#fff; 
 text-align：center; 
} 
 
 .chat-box-left {
 width：100％; 
 height：auto; 
 padding：15px; 
 -webkit-border-radius：5px; 
 -moz-border-radius：5px; 
 border-radius：5px; 
职位：亲属; 
 border：1px solid＃C5C5C5; 
 font-size：12px; 
 border：2px solid＃73AD21; 
 border-radius：25px; 
} 
 
 .chat-box-left：after {
 top：100％;还剩
：10％; 
 border：固体透明; 
 content：; 
位置：绝对; 
 border-top-color：＃C5C5C5; 
 border-width：15px; 
 margin-left：-15px; 
} 
 
 .chat-box-name-left {
 margin-top：30px; 
 margin-left：60px; 
 text-align：left; 
颜色：＃049E64; 
} 
 
 .chat-box-name-left img {
 max-width：40px; 
 border：2px solid＃049E64; 
} 
 
 .chat-box-right {
 width：100％; 
 height：auto; 
 padding：15px; 
 -webkit-border-radius：5px; 
 -moz-border-radius：5px; 
 border-radius：5px; 
职位：亲属; 
 border：1px solid＃C5C5C5; 
 font-size：12px; 
} 
 
 .chat-box-right：之后{
 top：100％; 
正确：10％; 
 border：固体透明; 
 content：; 
位置：绝对; 
 border-top-color：＃C5C5C5; 
 border-width：15px; 
 margin-left：-15px; 
} 
 
。聊天框名称右{
 color：＃354EA0; 
 margin-top：30px; 
 margin-right：60px; 
 text-align：right; 
} 
 
。聊天方块名称右img {
最大宽度：40px; 
 border：2px solid＃354EA0; 
} 
 
 .chat-box-footer {
 background-color：＃D8D8D8; 
 padding：10px; 
} 
  

这里我的要求是自动设置每个盒子（div）的宽度为每一个输入的内容，并相应地将它们浮动到左/右。

目前我的输出如下。

在上面的截图中可以看到，虽然div中只有一个单词，但它将整个宽度。请让我知道如何限制它到文本宽度。

谢谢

解决方案

< pre-class =snippet-code-css lang-css prettyprint-override> .hr-clas {border-top：1px solid＃A12EB3;}。chat-box-main {height：400px; overflow-y：auto;}。chat-box-div {border：2px solid＃A12EB3; border-bottom：2px solid＃A12EB3;}。chat-box-head {padding：10px 15px; border-bottom：2px solid＃A12EB3; background-color：＃B25AE5;颜色：#fff; text-align：center;}。chat-box-left {width：auto;身高：自动;填充：35px; -webkit-border-radius：5px; -moz-border-radius：5px; border-radius：5px;位置：相对; border：1px solid＃C5C5C5; font-size：12px;边框：2px实体＃73AD21; border-radius：25px;显示：inline-block; } .chat-box-left：在{top：auto;左：10％;边框：透明;内容：;位置：绝对;边框顶部颜色：＃C5C5C5; border-width：15px; margin-left：-15px;}。chat-box-name-left {margin-top：30px;} margin-left：60px; text-align：left;颜色：＃049E64;}。chat-box-name-left img {max-width：40px; border：2px solid＃049E64;}。chat-box-right {width：auto;身高：自动;填充：35px; -webkit-border-radius：5px; -moz-border-radius：5px; border-radius：5px;位置：相对; border：1px solid＃C5C5C5; font-size：12px; display：inline-block;}。chat-box-right：after {top：100％;显示：inline-block;右：10％;边框：透明;内容：;位置：绝对;边框顶部颜色：＃C5C5C5; border-width：15px; margin-left：-15px;}。chat-box-name-right {color：＃354EA0; margin-top：30px; margin-right：60px; text-align：right;}。chat-box-name-right img {max-width：40px; border：2px solid＃354EA0;}。chat-box-footer {background-color：＃D8D8D8; padding：10px;}

< div class =panel -body chat-box-main> < div class =chat-box-left>您好，欢迎！您可以问我关于合规政策的问题。< / div> < div class =chat-box-name-left> < img src =compiler-bot-static.gifalt =引导聊天框用户图片class =img-circle> - Bot< / div> < hr class =hr-clas> < div class =chat-box-rightid =chatbox>嗨< / div> < div class =chat-box-name-right> < img src =smiley.jpgalt =引导聊天框用户图片class =img-circle> < / DIV> < div class =chat-box-left>你好< / div> < div class =chat-box-name-left> < img src =compiler-bot-static.gifalt =引导聊天室用户图片class =img-circle> - Bot< / div>< / div>

I've the below HTML Code in my document.

<div class="panel-body chat-box-main">
    <div class="chat-box-left">Hello, Welcome!. You can ask me
        questions on Compliance Policy ..</div>
    <div class="chat-box-name-left">
        <img src="compiler-bot-static.gif" alt="bootstrap Chat box user image"
            class="img-circle"> - Bot
    </div>
    <hr class="hr-clas">



    <div class="chat-box-right" id="chatbox">Hi</div>
    <div class="chat-box-name-right">
        <img src="smiley.jpg" alt="bootstrap Chat box user image"
            class="img-circle">
    </div>
    <div class="chat-box-left">Hello</div>
    <div class="chat-box-name-left">
        <img src="compiler-bot-static.gif" alt="bootstrap Chat box user image"
            class="img-circle">- Bot
    </div>
</div>

And my CSS is as below.

.hr-clas {
    border-top: 1px solid #A12EB3;
}

.chat-box-main {
    height: 400px;
    overflow-y: auto;
}

.chat-box-div {
    border: 2px solid #A12EB3;
    border-bottom: 2px solid #A12EB3;
}

.chat-box-head {
    padding: 10px 15px;
    border-bottom: 2px solid #A12EB3;
    background-color: #B25AE5;
    color: #fff;
    text-align: center;
}

.chat-box-left {
    width: 100%;
    height: auto;
    padding: 15px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    position: relative;
    border: 1px solid #C5C5C5;
    font-size: 12px;
    border: 2px solid #73AD21;
    border-radius: 25px;
}

.chat-box-left:after {
    top: 100%;
    left: 10%;
    border: solid transparent;
    content: " ";
    position: absolute;
    border-top-color: #C5C5C5;
    border-width: 15px;
    margin-left: -15px;
}

.chat-box-name-left {
    margin-top: 30px;
    margin-left: 60px;
    text-align: left;
    color: #049E64;
}

.chat-box-name-left img {
    max-width: 40px;
    border: 2px solid #049E64;
}

.chat-box-right {
    width: 100%;
    height: auto;
    padding: 15px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    position: relative;
    border: 1px solid #C5C5C5;
    font-size: 12px;
}

.chat-box-right:after {
    top: 100%;
    right: 10%;
    border: solid transparent;
    content: " ";
    position: absolute;
    border-top-color: #C5C5C5;
    border-width: 15px;
    margin-left: -15px;
}

.chat-box-name-right {
    color: #354EA0;
    margin-top: 30px;
    margin-right: 60px;
    text-align: right;
}

.chat-box-name-right img {
    max-width: 40px;
    border: 2px solid #354EA0;
}

.chat-box-footer {
    background-color: #D8D8D8;
    padding: 10px;
}

Here my requirement is to automatically set the width of each box(div) as per the content entered and float them accordingly to left/right.

Currently my output is as below.

Here as seen in the above screenshot, though there is only one word in the div, it is taking the entire width. Please let me know on how can I limit this to the text width.

Thanks

解决方案

Are you looking some thing like this, Try this add display: inline-block; to div

.hr-clas {
    border-top: 1px solid #A12EB3;
}

.chat-box-main {
    height: 400px;
    overflow-y: auto;
}

.chat-box-div {
    border: 2px solid #A12EB3;
    border-bottom: 2px solid #A12EB3;
}

.chat-box-head {
    padding: 10px 15px;
    border-bottom: 2px solid #A12EB3;
    background-color: #B25AE5;
    color: #fff;
    text-align: center;
}

.chat-box-left {
    width:auto;
    height: auto;
    padding: 35px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    position: relative;
    border: 1px solid #C5C5C5;
    font-size: 12px;
    border: 2px solid #73AD21;
    border-radius: 25px;
  display: inline-block;
  
}

.chat-box-left:after {
    top: auto;
    left: 10%;
    border: solid transparent;
    content: " ";
    position: absolute;
    border-top-color: #C5C5C5;
    border-width: 15px;
    margin-left: -15px;
}

.chat-box-name-left {
    margin-top: 30px;
    margin-left: 60px;
    text-align: left;
    color: #049E64;
}

.chat-box-name-left img {
    max-width: 40px;
    border: 2px solid #049E64;
}

.chat-box-right {
    width:auto;
    height: auto;
    padding: 35px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    position: relative;
    border: 1px solid #C5C5C5;
    font-size: 12px;
  display: inline-block;
}

.chat-box-right:after {
    top: 100%;
 display: inline-block;   right: 10%;
    border: solid transparent;
    content: " ";
    position: absolute;
    border-top-color: #C5C5C5;
    border-width: 15px;
    margin-left: -15px;
}

.chat-box-name-right {
    color: #354EA0;
    margin-top: 30px;
    margin-right: 60px;
    text-align: right;
}

.chat-box-name-right img {
    max-width: 40px;
    border: 2px solid #354EA0;
}

.chat-box-footer {
    background-color: #D8D8D8;
    padding: 10px;
}

<div class="panel-body chat-box-main">
    <div class="chat-box-left">Hello, Welcome!. You can ask me
        questions on Compliance Policy ..</div>
    <div class="chat-box-name-left">
        <img src="compiler-bot-static.gif" alt="bootstrap Chat box user image"
            class="img-circle"> - Bot
    </div>
    <hr class="hr-clas">



    <div class="chat-box-right" id="chatbox">Hi</div>
    <div class="chat-box-name-right">
        <img src="smiley.jpg" alt="bootstrap Chat box user image"
            class="img-circle">
    </div>
    <div class="chat-box-left">Hello</div>
    <div class="chat-box-name-left">
        <img src="compiler-bot-static.gif" alt="bootstrap Chat box user image"
            class="img-circle">- Bot
    </div>
</div>

这篇关于根据内部div内容宽度更改边框宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！