我想不通的问题。我有一个非常简单的页面布局。容器内的两个 div。顶部的 Div，div“导航 block ”，包含用于菜单的 ul 和 li。从 CSS 中，您会看到它的宽度为 30%。当前位于“navigation-block”div 下方的“bio”div 宽度为30%。
我想要的只是让“bio”div float 到“navigation-block”div 的右侧。我确保“导航 block ”上没有 clear:both 或 clear:right。我在“bio”div 和 display:inline 上尝试了 float:left 和 float:right，但没有快乐我错过了什么。
Html 很简单，我没有检查过任何错误。
下面的 CSS
.gridContainer {
position:relative;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 100%;
}
#bio {
width: 30%;
height:auto;
background-color: rgba(256,256,256,0.2);
color: rgba(256,256,256, 0.8);
text-align: center;
border: 1px solid white;
}
#navigation-block {
position:relative;
width:30%;
}
下面是菜单 CSS 的其余部分
ul#sliding-navigation
{
list-style: none;
font-size: .75em;
padding: 0;
}
ul#sliding-navigation li.sliding-element h3,
ul#sliding-navigation li.sliding-element a
{
display: block;
width: 60%;
padding: 2% 2%;
margin: 0;
margin-bottom: 1%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
ul#sliding-navigation li.sliding-element h3
{
color: rgba(0, 0, 0, 0.8);
background-color: rgba(256, 256, 256, 0.6);
font-weight: normal;
border: 1px solid white;
}
ul#sliding-navigation li.sliding-element a
{
color: #000;
background-color: rgba(256, 256, 256, 0.4);
text-decoration: none;
}
ul#sliding-navigation li.sliding-element a:hover { color: rgba(256, 256, 256, 0.8); }
<body>
<div class="gridContainer clearfix">
<div id="navigation-block">
<ul id="sliding-navigation">
<li class="sliding-element"><h3>Zion City Limits</h3></li>
<li class="sliding-element"><a href="Index.html">Home</a></li>
<li class="sliding-element"><a href="#">Danny</a></li>
<li class="sliding-element"><a href="#">Dylan</a></li>
<li class="sliding-element"><a href="#">Bill</a></li>
<li class="sliding-element"><a href="#">Rich</a></li>
<li class="sliding-element"><a href="#">John</a></li>
</ul>
</div>
<div id="bio">This is the content for Layout Div Tag </div>
</div>
</body>
感谢任何帮助
谢谢
最佳答案
我知道这是一篇旧帖子，但可以帮助下一个看到这篇帖子的人。
display: inline-block;
当父 div 的高度不是静态时，这必须用于对齐其他 div 内部的 div。
关于css - 为什么我的 div 不能水平对齐？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13885943/