簡單的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>