Question

这是问题，我有一个简单的标记，头部，菜单，页脚和上下文。菜单位于左侧，右侧是上下文，其中应为3个div：两个div应该在一行中，第三个div应该在它们之下。

问题是第三个div位于菜单下面。

这是包含评论的代码，pelase看看伙计们 ......我觉得完全注定了这个，不知道......

<html>
<head>
<style>

div.header{                                 border:1px     solid black }
div.menu{clear:both;float:left;             border:1px solid blue}
div.context{                                border:1px     solid #0099CC}
div.footer{clear:both;                      border:1px solid     red}

div.one {                                   border:1px     solid yellow}
div.two {                                   border:1px     solid purple}
div.three {                                 border:1px     solid green}

</style>
</head>

<body>

<div class="header">
    header 
</div>
<div class="menu"> 
    menu<br>menu<br>menu<br>menu
</div>
<div class="context">
    <div class="one"     style="float:left">Div 1 <BR>Div 1 <BR>Div 1 </div>
    <div class="two"     style="">Div 2</div>
    <div class="three"   style="clear:both">Div 3, what the hell are you doing here     under the menu? You should be just under the Div 1!</div>
</div>
<div class="footer"> 
    footer
</div>

</body>
</html>

Answer 1

如果您的菜单具有固定宽度（如200px），则可以为div.context应用margin-left:200px以对齐上下文div的内容。

如果您的菜单具有动态宽度，请使用此css：

div.menu{ 
border: 1px solid blue;
display: inline-block;

}

和上下文：

div.context  {
border: 1px solid #0099CC;
display: inline-block;

}

Answer 2

快速浏览一下这篇博文，了解内联元素和块元素之间的区别。

http://www.techrepublic.com/article/learn-distinctions-between-inline-and-block-html-elements/6094821

默认情况下，HTML以三种方式之一显示其元素：

内联：这些元素在放置之前或之后不会强制使用新线条，并且只会消耗尽可能多的空间。
阻止：新元素出现在元素之前和之后，消耗全部可用宽度隐藏：有一些元素永远不会在浏览器窗口中显示，例如元标记和脚本和样式部分。

如果在左边还有另一个div浮动的话，如何将div放在两个div之下？

2 个答案: