以前只是简单的写点html，没有真正的写过项目。最近公司给安排了点h5的活。在布局的过程中，发现子标签同时包含百分比和px，px具体像素有时候会失效，特此研究下，看看两者具体啥关系。
图1
图2
如上图1和图2，我们要求左边的宽度线可变，而要求右边文字的宽度一定，数字保持对其，文字保持对其。
高手这种布局高手略过，菜鸟布局
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.KCERDIncomeDetail{
background-color: #f6faff;
padding-top: 20px;
padding-left: 25px;
padding-bottom: 20px;
/* padding-right: 18px;
*/ }
.KCERDIncomeDetailItem{
display: flex;
flex-direction: row;
align-items: center;;
justify-content: space-between;
}
.KCERDIncomeDetailGraphLength{
width: 100%;
height: 10px;
margin-top: 7px;
margin-bottom: 8px;
}
.KCERDIncomeDetailGraph{
height: 10px;
border-radius: 5px;
}
.KCERDIncomeDetailNameLength{
display: flex;
align-items: center;;
flex-direction: row;
width: 150px;
}
.KCERDIncomeDetailName{
font-size: 9px;
margin-left: 20px;
color: #606060;
width: 45px;
}
.KCERDIncomeDetailPrice{
font-size: 13px;
margin-left: 10px;
margin-right: 10px;
width: 75px;
color: #242424;
}
</style>
</head>
<body>
<div class="KCERDIncomeDetail"><div class="KCERDIncomeDetailItem"><div class="KCERDIncomeDetailGraphLength"><div class="KCERDIncomeDetailGraph" style="background: green; width: 100%;"></div></div> <div class="KCERDIncomeDetailNameLength"><div class="KCERDIncomeDetailName">电子支付</div><div class="KCERDIncomeDetailPrice">240680.00</div></div></div><div class="KCERDIncomeDetailItem"><div class="KCERDIncomeDetailGraphLength"><div class="KCERDIncomeDetailGraph" style="background: rgb(230, 141, 94); width: 4%;"></div></div> <div class="KCERDIncomeDetailNameLength"><div class="KCERDIncomeDetailName">现金</div><div class="KCERDIncomeDetailPrice">2400.00</div></div></div><div class="KCERDIncomeDetailItem"><div class="KCERDIncomeDetailGraphLength"><div class="KCERDIncomeDetailGraph" style="background: rgb(74, 205, 198); width: 33%;"></div></div> <div class="KCERDIncomeDetailNameLength"><div class="KCERDIncomeDetailName">现金</div><div class="KCERDIncomeDetailPrice">240680.00</div></div></div><div class="KCERDIncomeDetailItem"><div class="KCERDIncomeDetailGraphLength"><div class="KCERDIncomeDetailGraph" style="background: rgb(73, 208, 122); width: 45%;"></div></div> <div class="KCERDIncomeDetailNameLength"><div class="KCERDIncomeDetailName">现金</div><div class="KCERDIncomeDetailPrice">2.00</div></div></div><div class="KCERDIncomeDetailItem"><div class="KCERDIncomeDetailGraphLength"><div class="KCERDIncomeDetailGraph" style="background: rgb(74, 205, 198); width: 33%;"></div></div> <div class="KCERDIncomeDetailNameLength"><div class="KCERDIncomeDetailName">现金</div><div class="KCERDIncomeDetailPrice">280.00</div></div></div><div class="KCERDIncomeDetailItem"><div class="KCERDIncomeDetailGraphLength"><div class="KCERDIncomeDetailGraph" style="background: rgb(74, 205, 198); width: 33%;"></div></div> <div class="KCERDIncomeDetailNameLength"><div class="KCERDIncomeDetailName">现金</div><div class="KCERDIncomeDetailPrice">240680.00</div></div></div><div class="KCERDIncomeDetailItem"><div class="KCERDIncomeDetailGraphLength"><div class="KCERDIncomeDetailGraph" style="background: rgb(74, 205, 198); width: 33%;"></div></div> <div class="KCERDIncomeDetailNameLength"><div class="KCERDIncomeDetailName">现金</div><div class="KCERDIncomeDetailPrice">2480.00</div></div></div><div class="KCERDIncomeDetailItem"><div class="KCERDIncomeDetailGraphLength"><div class="KCERDIncomeDetailGraph" style="background: rgb(74, 205, 198); width: 33%;"></div></div> <div class="KCERDIncomeDetailNameLength"><div class="KCERDIncomeDetailName">现金</div><div class="KCERDIncomeDetailPrice">240680.00</div></div></div><div class="KCERDIncomeDetailItem"><div class="KCERDIncomeDetailGraphLength"><div class="KCERDIncomeDetailGraph" style="background: rgb(73, 128, 208); width: 10%;"></div></div> <div class="KCERDIncomeDetailNameLength"><div class="KCERDIncomeDetailName">现金</div><div class="KCERDIncomeDetailPrice">24680.00</div></div></div></div>
</body>
</html>
进度条的宽度类是
.KCERDIncomeDetailGraphLength{
width: 100%;
height: 10px;
margin-top: 7px;
margin-bottom: 8px;
}
而文字和价格类是
.KCERDIncomeDetailNameLength{
display: flex;
align-items: center;;
flex-direction: row;
width: 150px;
}
.KCERDIncomeDetailName{
font-size: 9px;
margin-left: 20px;
color: #606060;
width: 45px;
}
.KCERDIncomeDetailPrice{
font-size: 13px;
margin-left: 10px;
margin-right: 10px;
width: 75px;
color: #242424;
}
这里我们进度条的宽度设置的是100%。而文字和价格的总宽度设置的是150px。
这里我们要是去掉KCERDIncomeDetailName 和 KCERDIncomeDetailPrice 的width会发生什么呢？
去掉width 窄屏幕
去掉width 宽屏幕
这里我们发现了电子支付变成两行或者后面的价格不对齐了。
但是文字和价格的在一起的总长度的每项长度不变，但是总长度在变化。（拖动html文件的窗口大小观察）
因此我们这里再把KCERDIncomeDetailName 的width=45px;
KCERDIncomeDetailName 的width=45
发现文本和价格完全不对齐了。将文本的颜色变成蓝色。我们发现如下
image.png
发现文字的宽度不变，而价格的宽度自适应了，相应的super div也跟着自适应了（我们设置的是width=150px）
总结如下：在多个子标签中对子标签使用width属性，要是子标签的width同时包含百分比和具体长度。分情况如下：
具体长度(px)的子标签没有child的：那么长度是定宽的。
具体长度(px)的子标签有child的：具体长度取决于child的布局；
- 具体长度(px)的子标签有child的,但是child没有具体布局，那么，长度是具体长度(px)的子标签有child的,但是child自有布局指定的长度。
- 具体长度(px)的子标签有child的,但是child 具有布局，但是不是确定的，那么长度是可变的。
- 具体长度(px)的子标签有child的,但是child 具有布局，也确定了。那么长度是不变的。
网友评论