鍍金池/ 問答/HTML/ 一個(gè)簡單的css布局問題

一個(gè)簡單的css布局問題

關(guān)于兩列布局的一個(gè)問題請(qǐng)教下大家。

HTML：

<div class="container">
    <div class="left">12.23%</div>
    <div class="right"></div>
</div>

CSS:

.container {
        display: flex;
        width: 200px;
        border:1px solid black;
        height: 20px;
        line-height: 20px;
}
.left {
        width: 20%;
        margin-right:20px;
}
.right {
        flex: 1;
        background-color: pink;
}

顯示如下：
圖片描述

我的需求是，container的寬度不是固定的，但是UI要保證左邊百分比的數(shù)字一定要完整顯示并且不會(huì)跟右邊的pink區(qū)域重疊。pink區(qū)域的寬度就是container的寬度減去百分比數(shù)字的寬度最后得到的。我自己上面寫的代碼在container寬度比較小的時(shí)候會(huì)出錯(cuò)，數(shù)字直接覆蓋了。有什么好的解決方法嗎？

回答
編輯回答
澐染

min-width: 2em;

2017年7月28日 06:05
編輯回答
悶騷型

如你所說，左邊你寫20%，寬度比較小的時(shí)候會(huì)出錯(cuò)，這是因?yàn)槟愕奈淖衷趯挾茸冃〉臅r(shí)候沒有變小呀（本來挺緊湊的，文字所占的比例變大了），左邊可不可以寫成固定的，或最小寬度，或一個(gè)比較寬裕的寬度呢，這樣就解決了根本問題

2017年9月2日 12:58
編輯回答
話寡
.container {
        display: flex;
        width: 200px;
        border:1px solid black;
        height: 20px;
        line-height: 20px;
}
.left {

}
.right {
        flex: 1;
        background-color: pink;
}
2018年5月3日 23:35