Question

我正在尝试将两个div放在一个位置固定的父div中，我尝试了任何一种我知道的操作来解决但没有成功。我尝试使用display: inline-block，我尝试使用floats并使用display: table-cell但是没有任何效果。我希望你们中的某个人能够提前解决问题。我将保留链接到JSFiddle，我曾经做过一些实验，所以你可以自己尝试：

JSFiddle

.CR_FE_MenuB{
width: 100%;
margin: 0;
padding: 0;
background-color: rgba(255,255,255,0.9);
box-shadow: 0px 1px 4px rgba(51,51,51,0.3);
position: fixed;
top: 0;
left: 0;
border-bottom: 1px solid rgba(194,194,194,1);
z-index: 10000;
margin-bottom: 10px;
text-align: left;
display: inline-table;
}

.CR_FE_MenuB .CR_FE_Menu_Logo{
width: 20%;
height: 60px;
padding-left: 5%;
display: table-cell;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

.CR_FE_MenuB .CR_FE_Cont_Menu{
display: table-cell;
width: 50%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

.CR_FE_MenuB a{
text-decoration: none;
display: block;
min-height: 100%;
width: 100%;
color: #008EC8;
}

.CR_FE_MenuB a:hover{
color: #FFF;
}

.CR_FE_MenuB ul{
margin: 0;
padding: 0;
list-style: none;
height: 60px;
text-align: center;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

.CR_FE_MenuB li{
width: 25%;
display: inline-block;
*display: inline;
*zoom: 1;
min-height: 100%;
height: 100%;
padding-top: 19px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;

-webkit-transition: background-color 0.5s;
transition: background-color 0.5s;
}

.CR_FE_MenuB li:hover{
background-color: #008EC8;
}

.selected{
background-color: #008EC8;
}

.selected a{
color: #FFF;
}

-G。

Answer 1

您需要将vertical-align：bottom添加到徽标div。

添加以下CSS代码 -

.CR_FE_Menu_Logo{
    vertical-align: bottom;
}

这应解决问题。

如何定位两个显示：一个位置内的table-cell元素：fixed div

1 个答案: