我遇到了棘手的问题，我需要在一行中放置两个div（left，right），right必须具有固定的宽度，但是left必须填充可用空间，换句话说：left div必须具有100％-X像素，right div应该为X像素。
要点：没有位置相对/绝对hack。
有什么办法可以达到这个结果。我已经尝试了很多方法，但是没有运气。
这是jsfiddle
标记
<html>
<head>
<title></title>
</head>
<body>
<style>
.container {
/* container don't matter */
width: 500px;
background-color: bisque;
height: 50px;
}
.container .left {
/* display: inline-block; */
margin-right: 50px;
background-color: burlywood;
height: 50px;
}
.container .right {
float: right;
background-color: chartreuse;
width: 50px;
height: 50px;
}
</style>
<div class="container">
<div class="left">
fill free space (100% - right)
</div>
<div class="right">
fixed width
</div>
</div>
</body>
</html>
您可以这样做：
CSS：
.container {
width: 500px;
background-color: bisque;
height: 50px;
display: table;
}
.container .left {
background-color: burlywood;
height: 50px;
display: table-cell;
width: 100%;
}
.container .right {
background-color: chartreuse;
width: 50px;
height: 50px;
display: inline-block;
vertical-align: text-top;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句