首页 文章

如何为右侧的宽度设置fit-content - 动态内容宽度

提问于
浏览 次
0

如何在右侧设置宽度的fit-content . 我使用 fit-content 值作为宽度，并且每个东西都在左侧，但在右侧内容放在页面的中心 . 我使用这个CSS来制作动态宽度的内容：

.chat li.right .chat-body {
    margin-right: 60px;
    border: 1px solid $c-grey;
    padding: 10px;
    background-color: whitesmoke;
    border-color: #e3e3e3;
    /*box-shadow: 0 1px 0 #cfcfcf;*/
    border-radius: 2px;
    margin-left: 20%;
    max-width: 80%;
    width: fit-content;
}

这是我的聊天示例：CodePen Example

css css3 width right-to-left

1 回答

  • 2

    替换为我的代码 .

    .chat li.left .chat-body {
    margin-left: 10px;
    border: 1px solid #DDDDDD;
    padding: 10px;
    background-color: whitesmoke;
    border-color: #e3e3e3;
    /*box-shadow: 0 1px 0 #cfcfcf;*/
    border-radius: 2px;
    /* margin-right: 20%; */
    max-width: 80%;
    width: fit-content;
    float: left;
}

.chat li.right .chat-body {
    margin-right: 10px;
    border: 1px solid #DDDDDD;
    padding: 10px;
    background-color: whitesmoke;
    border-color: #e3e3e3;
    /*box-shadow: 0 1px 0 #cfcfcf;*/
    border-radius: 2px;
    /* margin-left: 20%; */
    max-width: 80%;
    width: fit-content;
    float: right;
}

    和：

    .chat li small.pull-left {
    padding-left: 60px;
    padding-top: 5px; 
    clear:both;   
}
.chat li small.pull-right {
    padding-right: 60px;
    padding-top: 5px; 
    clear:both;
}

    Working Demo

    回复于

相关问题