Question

这是2个div的代码。最终div.main在页面上水平拉伸，div.navigation将其自身定位在左下方。如果我将float：top放到div.navigation中，那么内容将保留在div.main下面的相同位置，但是框本身会延伸到div.main。

div.navigation 
{
    margin-top: 0px;
    text-align: center;
    border: solid #079EA3 1px;
    float: left;
    width: 160px;
    padding: 5px;
}
div.main
{
    margin-top: 0px;
    clear: left;
    float: left;
    border: solid #079EA3 1px;
    margin-left: 194px;
    padding: 5px;
}

UPDATE !!! 以下是jsFiddle中2个div的代码和结果。

http://jsfiddle.net/mqpkdefy/2/

Answer 1

以下是 working Fiddle 。默认情况下， div是阻止级别元素会占用整个浏览器宽度，如果您还没有为其指定任何宽度..

div.navigation 
{
    margin-top: 0px;
    text-align: center;
    border: solid #079EA3 1px;
    float: left;
    width: 20%;    /*changes done*/
    padding: 5px;
}
div.main
{
    margin-top: 0px;
    clear: left;
    float: left;
    border: solid #079EA3 1px;
     width:70%;   /*changes done  must provide the width to the main div */
    padding: 5px;
    margin-right:20px  /*changes done*/
}

如果您希望导航位于左侧，则表示链接 Working Fiddle 只需将导航div放在主div上方

Answer 2

嘿，您只需要从Clear:left

中删除css属性div.main

见working

Answer 3

嘿从主div中删除 clear：left 或将其设置为 clear：right;

div.navigation 
{
    margin-top: 0px;
    text-align: center;
    border: solid #079EA3 1px;
    float: left;
    width: 160px;
    padding: 5px;
}
div.main
{
    margin-top: 0px;
    clear: right;         /*changes done*/
    float: left;
    border: solid #079EA3 1px;
    margin-left: 194px;
    padding: 5px;
}

Answer 4

我会评论Adarsh Gowda K R的答案，但我刚刚开始。

我已删除clear：left并更改了float：left to float：right因为我假设您想要左侧的主导航菜单，因为它显示在原始小提琴示例中。

菜单和主要div包含在一个div中，类内容的固定宽度为960px

正如Adarsh Gowda K R所说，主要的div ...具有块的显示类型，这意味着它占用了整个浏览器的宽度。

div.navigation 
{
    margin-top: 0px;
    text-align: center;
    border: solid #079EA3 1px;
    float: left;
    width: 160px;
}
div.main
{
    float:right;
    margin-top: 0px;
    border: solid #079EA3 1px;
    width:788px;
}

div.content{
    width:960px;
}

见

http://jsfiddle.net/AuroraArcade/mqpkdefy/38/

Answer 5

您需要将Main Div的宽度设置为某个值。默认情况下，它占用宽度的100％.. 同时删除margin-left，因为它不是必需的

Div盒子没有正确定位

5 个答案: