简单的2列div布局

我想创建一个非常简单的2列布局，在HTML中浮动div的。问题是以下div，foot总是呈现在right div的右侧。我知道我应该在某个地方使用clear声明，但我不确定哪个地方适合。简单的2列div布局

另外，正如您在左边看到的，我明确指定了left的高度。有没有办法将force right设置为相同的高度而不再指定它？

<div id="main"> 
    <div id="left" style="float: left; width: 150px; background: #DDDDDD; height: 500px;"> 
     left column 
    </div> 

    <div id="right" style="float: left; background: #EEEEEE;"> 
     right column 
    </div> 
</div> 

<div id="foot"> 
    footer 
</div>

来源

2011-07-19 Mike

在foot div上使用clear:both。

对于第二个问题，您可以将main div设置为具有特定高度，然后将left和right的高度设置为100％。

来源

2011-07-19 13:51:06

这是你想要的吗？

#foot{display: block; clear: both;}

来源

2011-07-19 13:53:09 Juraj

不工作，你需要莫还有，'div''自然是'block' – Phil

foot div应该被清除。

#foot { clear: left /* or both */; }

至于等高挑战，我建议你使用faux-column technique by Roger Johansson。

请记住，主列的内容必须多于次列的内容。如果是这种情况，它将移除500像素的高度限制，并且对于您想要的任何内容都很灵活。

来源

2011-07-19 13:53:17 josemota

你的CSS应该是这样的：

#foot{ 
    clear: both; 
} 
#left, #right{ 
    float: left; // remove this definiton from tag 
    height: 500px; // remove this definition from tag 
}

希望这有助于

来源

2011-07-19 13:53:48 Nebojsa

创建一个空div，并把它在正确的div略高于主DIV年底结束，并给它的类名clrbth的..

在CSS，你可以将此属性添加到类

.clrbth { 
clear:both; 
margin:0; 
padding:0; 
}

来源

2011-07-19 16:07:50 monk

简单的2列div布局

回答

相关问题