简单的HTML/CSS - 定位div的

Question

我最近进入了HTML/CSS的世界，我正在苦苦挣扎。

我想定位div的是这样的：

但我只是设法像这样：

正如你看到的，我想DIV 5〜低于股利4，和旁边的div 3.但我只有

当然，我可以将div 4和div 5包装在一个新的div中，但我宁愿学习一个更好的方法来做到这一点。

body { 
 
    background-color: yellow; 
 
} 
 
#banner { 
 
    background-color: green; 
 
} 
 
#topp-meny { 
 
    background-color: pink; 
 
} 
 
#side-meny { 
 
    background-color: violet; 
 
    float: left; 
 
} 
 
#innhold { 
 
    background-color: grey; 
 
    float: left; 
 
} 
 
#footer { 
 
    background-color: blue; 
 
    clear: both; 
 
}

<div id="banner">Webutvikling</div> 
 

 
<div id="topp-meny">Meny</div> 
 

 

 
<div id="side-meny"> 
 
    <p>sidemeny</p> 
 
</div> 
 

 
<div id="innhold"> 
 
    <p>innhold</p> 
 
</div> 
 

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

Answer 1

我不认为有一个更好的办法，而不在DIV你的事业部4和5，但在地方使用float的包裹这样做，你可以指定一个width每个格并显示出来作为display : inline-block;（好一点）。

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    background-color: yellow; 
 
} 
 
#banner { 
 
    background-color: green; 
 
} 
 
#topp-meny { 
 
    background-color: pink; 
 
} 
 
#side-meny { 
 
    background-color: violet; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
} 
 
#innhold { 
 
    background-color: grey; 
 
} 
 
#footer { 
 
    background-color: blue; 
 
} 
 
#wrapping { 
 
    display: inline-block; 
 
}

<div id="banner">Webutvikling</div> 
 
<div id="topp-meny">Meny</div> 
 
<div id="side-meny"> 
 
    <p>sidemeny</p> 
 
</div> 
 
<div id="wrapping"> 
 
    <div id="innhold"> 
 
    <p>innhold</p> 
 
    </div> 
 
    <div id="footer"> 
 
    <p>footer</p> 
 
    </div> 
 
</div>

没有包装，你可以添加一个height（PX中，而不是在％）到您的股利3，使股利5仍然是正确的。我真的不喜欢这个选项...

* { 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 
    body { 
 
     background-color: yellow; 
 
    } 
 
    #banner { 
 
     background-color: green; 
 
    } 
 
    #topp-meny { 
 
     background-color: pink; 
 
    } 
 
    #side-meny { 
 
     background-color: violet; 
 
     float: left; 
 
     height: 50px; 
 
    } 
 
    #innhold { 
 
     background-color: grey; 
 
     float: left; 
 
     width: 90% 
 
    } 
 
    #footer { 
 
     background-color: blue; 
 
     float: left; 
 
     width: 90% 
 
    }

<div id="banner">Webutvikling</div> 
 
<div id="topp-meny">Meny</div> 
 
<div id="side-meny"> 
 
    <p>sidemeny</p> 
 
</div> 
 
<div id="innhold"> 
 
    <p>innhold</p> 
 
</div> 
 
<div id="footer"> 
 
    <p>footer</p> 
 
</div>

的问题是，你需要指定你的子菜单静态高度...

Answer 2

通过您所提供的图表状况：

#side-meny { 
    float:left 
} 

使含#innhold和#footer的一个新的div，我们称之为＃右容器所以你必须

<div id="right-container"> 
    <div id="innhold"> 
    <p>innhold</p> 
    </div> 

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

Then

#right-container { 
    float:right 
} 

看看是否有效。

Answer 3

在你的CSS文件，你可以设置

#footer{ 
    ... 
    position:absolute; 
    left: (div3's width); 
    top: (div1+div2+div4 height) 
} 

Answer 4

请使用下面的代码，我已经修改。

             
  
 
   
 
    
 body { 
 
     background-color: yellow; 
 
     } 
 
    #banner { 
 
     background-color: green; 
 
     } 
 
    #topp-meny { 
 
     background-color: pink; 
 
     } 
 
    #side-meny { 
 
     background-color: violet; 
 
     display: inline-block; 
 
     vertical-align: top; 
 
     width: 25%; 
 
     } 
 
    #block { 
 
     display: inline-block; 
 
     vertical-align: top; 
 
     width: 74%; 
 
     } 
 
    #block p { 
 
     margin: 0; 
 
     } 
 
     #innhold { 
 
     background-color: grey; 
 
     } 
 
    #footer { 
 
     background-color: blue; 
 
     clear: both; 
 
     } 
 
    
 
    
 <div id="banner">Webutvikling</div> 
 
    <div id="topp-meny">Meny</div> 
 
    <div id="side-meny"> 
 
     <p>sidemeny</p> 
 
     </div> 
 
     <div id="block"> 
 
     <div id="innhold"> 
 
     <p>innhold</p> 
 
     </div> 
 
     <div id="footer"> 
 
     <p>footer</p> 
 
     </div> 
 
     </div>