在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

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

一個簡單的css布局問題

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

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ù)字一定要完整顯示并且不會跟右邊的pink區(qū)域重疊。pink區(qū)域的寬度就是container的寬度減去百分比數(shù)字的寬度最后得到的。我自己上面寫的代碼在container寬度比較小的時候會出錯，數(shù)字直接覆蓋了。有什么好的解決方法嗎？

回答
編輯回答
澐染

min-width: 2em;

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

如你所說，左邊你寫20%，寬度比較小的時候會出錯，這是因為你的文字在寬度變小的時候沒有變小呀（本來挺緊湊的，文字所占的比例變大了），左邊可不可以寫成固定的，或最小寬度，或一個比較寬裕的寬度呢，這樣就解決了根本問題

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