Html 如果左侧还有另一个div浮动，如何将一个div放置在两个div之下？_Html_Css Float_Markup

Html 如果左侧还有另一个div浮动，如何将一个div放置在两个div之下？

html

Html 如果左侧还有另一个div浮动，如何将一个div放置在两个div之下？,html,css-float,markup,Html,Css Float,Markup,问题是，我得到了一个简单的标记，标题、菜单、页脚和上下文。菜单位于左侧，右侧为上下文，其中应包含3个div：两个div应该在一排，第三个div应该就在它们下面问题是第三个div在菜单下这是包含注释的代码，pelase看一下 ...... 我觉得这件事是命中注定的，我不知道 <html> <head> <style> div.header{ border:1px solid bl

问题是，我得到了一个简单的标记，标题、菜单、页脚和上下文。菜单位于左侧，右侧为上下文，其中应包含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>


div.header{边框：1px纯黑}
div.menu{清除：两者；浮动：左侧；边框：1px纯蓝色}
div.context{border:1px solid#0099CC}
div.footer{清除：两个；边框：1px纯红色}
第一分区{边框：1px实心黄色}
第二分区{边框：1px纯紫色}
第三分区{边框：1px纯绿色}
标题
菜单
菜单
菜单
菜单
第1部分
第1部分
第1部分
第2组
第三组，你在菜单下面干什么？你应该就在1区下面！
页脚

如果您的菜单是固定宽度（如200px），您可以为div.context应用

左边距：200px

，以对齐context div的内容

如果菜单具有动态宽度，请使用以下css：

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

}

就上下文而言：

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

}

快速浏览这篇博客文章，看看内嵌元素和块元素之间的区别

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

内联：这些元素不会在其放置之前或之后强制新行，并且只会消耗必要的空间。
块：新行出现在元素之前和之后，元素占用了可用的全部宽度。
隐藏：有些元素永远不会显示在浏览器窗口中，例如元标记、脚本和样式部分