Question

我的文档中有以下HTML代码。

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

我的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;
    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;
}

这里我的要求是根据输入的内容自动设置每个框（div）的宽度，并相应地向左/右浮动它们。

目前我的输出如下。

在上面的截图中可以看到，尽管div中只有一个单词，但它占据了整个宽度。请告诉我如何将其限制为文字宽度。

由于

Answer 1

试试这个https://plnkr.co/edit/KXF1jkOd7G9JB8j7DIGC

我已将div更改为span。希望这有帮助！

<span class="chat-box-left">Hello, Welcome!. You can ask me
    questions on Compliance Policy ..</span>

Answer 2

您是否正在寻找这样的事情，请尝试将display: inline-block;添加到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内容宽度更改

2 个答案: