Question

我无法想象的问题。我有一个非常简单的页面布局。容器内有两个div。顶部的div，div“navigation-block”，包含菜单的ul和li。从CSS中你会看到它的宽度为30％。当前位于“导航区块”div下方的div“bio”的宽度为30％。

我想要的只是让“bio”div浮动到“navigation-block”div的右边。我已经确定没有明确的：无论是清楚的还是清楚的：就在“导航区块”上。香港专业教育学院尝试浮动：左侧和浮动：右侧的“生物”div并显示：内联，但没有任何快乐，我错过了什么。

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>

任何帮助表示赞赏

感谢

Answer 1

我知道这是一篇旧帖子，但是为了帮助遇到这篇文章的下一个人。

display: inline-block;

当父div的高度不是静态时，必须使用它来对齐其他div内的div。

Answer 2

这里有两个选择......

 #bio, #navigation-block {
   ...
   display:inline-block
}

或：

#bio, #navigation-block {
   ...
   float: left
}

div是块级元素，默认情况下不会彼此相邻放置

为什么我的div不会水平对齐？

2 个答案: