根据内部div内容宽度更改边框宽度

本文介绍了根据内部div内容宽度更改边框宽度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ < 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中只有一个单词，但它将整个宽度。请让我知道如何限制它到文本宽度。 谢谢 解决方案 .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内容宽度更改边框宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！