使用div的簡單框架

試圖使上面的使用div。每個矩形（一個長+右側的方形）應該是一個單位。它應該是div內的div嗎？（我明顯是新手，所以感謝任何幫助！）。幀的大小不應該是固定的，但是是有彈性的..

<body> 
<div id="frame"> 
    <div id="div1"></div>   
    <div id="div2"></div> 
    <div id="div3"></div> 
    <div id="div4"></div> 
    <div id="divSettings"></div> 
</div> 
</body>

（產地每個DIV的樣式表邊框）

來源

2013-09-30 O Henrik Thone

你最終解決了你的問題嗎？ –

我會做的「框架」除你包含分區，並設置所有的其他分區使用浮動的：右，浮「左，BR標籤和widht = XX％性質

來源

2013-09-30 03:04:05 jbrya029

我會創造something like this它使用的div中的div，寬度爲％，並float:right把內div的右側

/* HTML */ 
<div id="frame"> 
    <div class='row'><div class='inner'></div></div> 
    <div class='row'><div class='inner'></div></div> 
    <div class='row'><div class='inner'></div></div> 
    <div class='row'><div class='inner'></div></div> 
    <div id="divSettings"></div> 
</div> 

/* CSS */ 
#frame { 
    width: 350px; 
    height: 460px; 
} 
.row { 
    height:100px; 
    width: 100%; 
} 
.inner { 
    float: right; 
    width: 33%; 
    height:100%; 
    border-left:1px solid black; 
} 
#divSettings { 
    height: 50px; 
    width:100%; 
} 
div:not(.inner) { 
    border: 1px solid black; 
}

注：當設置的frame高度，不要忘了，包括增加的高度上的頂部和底部，內部的div有邊框

來源

2013-09-30 03:13:11

Fiddle

<div class="left" style="float:left; width:70%"> 
    <div class="left1">left 1</div> 
    <div class="left1">left 2</div> 
    <div class="left1">left 3</div> 
</div> 

<div class="right" style="float:right; width:30%"> 
<div class="right1">right 1</div> 
    <div class="right1">right 2</div> 
    <div class="right1"> right3</div> 
</div> 
<div class="footer" style="clear:both;">footer 
</div>

來源

2013-09-30 03:17:35 vishalkin

EXAMPLE

用這種方法我們創建行並將兩個div放入這一行。

也有另一種方式，我們都的div相對定位在div容器內：

EXAMPLE 2

現在，它由你來決定什麼是更好地爲您使用...

來源

2013-09-30 03:26:57 Thanos

使用div的簡單框架

回答

相關問題