在中心創建5個具有1個DIV的DIV

Question

我想創建如下圖所示的DIV。中心1 div，中心div 4 div。任何人都可以幫忙嗎??我已經嘗試過了，但我無法做到。

.mid{ 
    width:700px; 
    height:400px; 
    margin-left:100px; 
    background-color:black; 
} 

.navtop { 
    width:700px; 
    height:100px; 
    display: inline-block; 
    background-color:red; 

} 

.navbottom { 
    width:700px; 
    height:100px; 
    background-color:red; 
    display: inline-block; 
} 

.navleft { 
    width:100px; 
    height:400px; 
    float:left; 
    margin-top:100px; 
    display: inline-block; 
    background-color:red; 
} 

.navright { 
    width:100px; 
    height:400px; 
    display: inline-block; 
    background-color:red; 
} 

內容將是靜態的。我有一個右和底部的問題。

Answer 1

http://jsfiddle.net/z2qQG/2/

`<style> 
#container{width:500px;height:500px;} 
#div1{width:300px;height:100px;margin:auto;background:#000;color:#fff;} 
#div2{width:100px;height:300px;float:left;background:#000;color:#fff;} 
#div3{width:300px;height:100px;margin:auto;background:#000;color:#fff;} 
#div4{width:100px;height:300px;float:left;background:#000;color:#fff;} 
#div5{width:300px;height:300px;float:left;background:#fff;} 
</style> 

<div id="container"> 
    <div id="div1">DIV 1</div> 
    <div id="div4">DIV 4</div> 
    <div id="div5">DIV 5</div> 
    <div id="div2">DIV 2</div> 
    <div id="div3">DIV 3</div> 
</div>` 

Answer 2

<style> 
    #div1 { height: 100px; width: 300px; margin-left: 100px; background: orange; } 
    #div4 { height: 300px; width: 100px; float: left; background: red; } 
    #div5 { height: 300px; width: 300px; float: left; background: blue; } 
    #div2 { height: 300px; width: 100px; float: left; background: lime; } 
    #div3 { height: 100px; width: 300px; margin-left: 100px; clear: both; background: aqua; } 
</style> 

<div id="div1">DIV1</div> 
<div id="div4">DIV4</div> 
<div id="div5">DIV5</div> 
<div id="div2">DIV2</div> 
<div id="div3">DIV3</div> 

這將是最明顯的方法。還有其他幾種方法。

Answer 3

CSS-wise我可能會position: relative; DIV 5和position: absolute;其餘的，然後將它們移出頂部，底部，左側和右側的屬性。

#wrap {margin: 100px; width: 400px; height: 400px; position: absolute; background: black;} 
.side {position: absolute; background: red; width: 100%; height: 100%;} 
.side.top {height: 100px; top: -100px;} 
.side.bottom {height: 100px; bottom: -100px;} 
.side.left {width: 100px; left: -100px;} 
.side.right {width: 100px; right: -100px;} 

<div id="wrap"> 
    <div class="side top"></div> 
    <div class="side bottom"></div> 
    <div class="side left"></div> 
    <div class="side right"></div> 
</div> 

Example

Answer 4

是啊。相當簡單:)

http://jsfiddle.net/x5FrV/1

.wrap 
{ 
    position:relative; 
    ... 
} 

.border 
{ 
    position:absolute; 
    width:20px; 
    height:20px; 
    ... 
} 

.top 
{ 
    bottom:100%; 
    width:100%; 
} 

.right 
{ 
    left:100%; 
    height:100%; 
} 

.bottom 
{ 
    top:100%; 
    width:100%; 
} 

.left 
{ 
    right:100%; 
    height:100%; 
} 

<div class="wrap"> 
    <div class="top border">1</div> 
    <div class="right border">2</div> 
    <div class="bottom border">3</div> 
    <div class="left border">4</div> 

    <div class="content"> 
     go team sea slug! 
    </div> 

</div> 

Answer 5

還有一堆的方式，所以它確實更多地取決於 「爲什麼」 比 「怎麼做」，但如果客戶說這對我來說，我的第一個刺會看起來像這樣：

<div id="div5"> 
    <div id="div1">1</div> 
    <div id="div2">2</div> 
    <div id="div3">3</div> 
    <div id="div4">4</div> 
    Content 
</div> 

with CSS，如：

#div5 { 
    position: relative; 
    margin: 3em; 
    background-color: red; 
    width: 10em; 
    height: 10em; 
} 

#div1,#div2,#div3,#div4 { position: absolute; background-color: black; color: white; } 
#div1, #div3 { width: 100%; height: 2em; } 
#div1 { top: -2em; } 
#div3 { bottom: -2em; } 
#div2, #div4 { height: 100%; width: 2em; } 
#div2 { right: -2em; } 
#div4 { left: -2em; } 

Fiddle here