我一直在寻找答案,但没有答案,左右都没有浮点数,因此无法使用表格单元格。
我要最后一个菜单div自动适合布局,代码:
<div class="menu2">
<div class="esq"><img src="imgs/left-mainnav.png" width="10" height="60" alt=""/></div>
<div class="dir"><img src="imgs/right-mainnav.png" width="10" height="60" alt=""/></div>
<div class="botao1" style="border-left:1px solid #CCCCCC">Content</div>
<div class="botao1">Content</div>
<div class="botao1">Content</div>
<div class="botao1">Content</div>
<div class="botao1">Content</div>
<div class="botao1">Content</div>
</div>
样式:
.menu2 {
height: 63px;
width: auto;
margin-right: -11px;
margin-left: -11px;
margin-top: 5px;
}
.esq {
float: left;
height: 60px;
width: 10px;
}
.dir {
float: right;
height: 60px;
width: 10px;
}
.botao1 {
background-color: #f5f5f5;
text-align: center;
vertical-align: middle;
float: left;
height: 50px;
width: 149px;
border-right: 1px solid #cccccc;
margin: 0px;
padding: 0px;
}
最佳答案
您可能正在执行以下操作:
.menu2 {
height: 60px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
}
.dir{
order: 999;
}
.item {
width: 149px;
background-color: #f5f5f5;
text-align: center;
flex-shrink: 0;
border-right: 1px solid #cccccc;
}
.item p{
display: inline-block;
vertical-align: middle;
}
.item:last-child{
flex-grow: 1;
}
.esq, .dir {
width: 10px;
background-image: url( "http://placehold.it/10x60/E8117F" );
}
<div class="menu2">
<div class="item esq"></div>
<div class="item dir"></div>
<div class="item botao1"><p>Content</p></div>
<div class="item botao1"><p>Content</p></div>
<div class="item botao1"><p>Content</p></div>
</div>
关于css - 自动调整浮点数的最后一个菜单div,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/37041444/