簡單的HTML / CSS-定位div

Question

最近，我進入了HTML / CSS的世界，我在努力解決一些問題。

我想像這樣定位div：

但是我只能設法做到這一點：

如您所見，我希望div 5在div 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封裝在DIV 。但是，代替使用float ，您可以為每個div指定一個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> 

無需包裝，您可以為Div 3添加height （以PX而不是％），以便Div 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，我們將其稱為＃right-container

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

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

然后

#right-container {
  float:right
}

看看是否可行。

Answer 3

請使用以下已修改的代碼。

  
 
  
  
 
   
 
    
     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>
         
    
 
   
 
  

Answer 4

在您的css文件中，您可以設置

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