CSS/HTML佈局幫助

我使用這個代碼...CSS/HTML佈局幫助

<div id="app"> 
    <div id="app-actionbar"> 
     topbar 
    </div> 
    <div id="app-userinfo"> 
     sidebar 
    </div> 
    <div id="app-content"> 
     content 
    </div> 
</div> 

/** Styling **/ 

#app { 
    border:1px solid #666; 
} 

#app-actionbar { 
    color: #333; 
    width: 900px; 
    float: left; 
    height: 45px; 
    background: #D9D9DC; 
    margin-top:10px; 
} 

#app-content { 
    float: left; 
    color: #333; 
    background: #FFFFFF; 
    height: 350px; 
    width: 725px; 
    display: inline; 
} 

#app-userinfo { 
    color: #333; 
    background:#F2F2F2; 
    height: 350px; 
    width: 175px; 
    float: left; 
}

但是，它不喜歡的工作，我希望它。

我想在它周圍添加一個邊框，但它不起作用（並將其內容向下移動）。

enter image description here

來源

2011-06-09 Spencer

哪個部分要添加邊框？ – Dan 2011-06-09 01:55:47

如果沒有SO社羣猜測你實際想要達到什麼目的，你將不得不更清楚些，或者提供一個你希望它實際看起來如何的圖像。 – Dan 2011-06-09 02:00:58

我可以告訴他想要什麼......這不是一個謎。 http://jsfiddle.net/P9AQp/ – 2011-06-09 02:02:27

你需要明確的浮動元素在#app。嘗試將overflow:hidden;或overflow:auto;添加到#app。這將使邊框包裹整個DIV。

這裏有一個現場的jsfiddle你上面的片斷與overflow:hidden鏈接分配： http://jsfiddle.net/AhZAU/

頂部的距離，「（和它的移動內容下）」，正在被創建margin-top:10px在#app-actionbar。刪除邊距和空間將不再存在：http://jsfiddle.net/AhZAU/1/

來源

2011-06-09 01:53:18 Dan

這個問題有兩個部分：''我想在它周圍添加一個邊框，但它不工作（並且它的內容向下移動）。「' – thirtydot 2011-06-09 02:08:31

邊框不是因爲浮動元素沒有被清除。它被推下來，因爲他有一個margin-top：10px分配給＃app-actionbar DIV。 – Dan 2011-06-09 02:11:30

@thirtydot，我解釋了這個問題，如「我希望邊界一直繞過但它不工作，而是在頂部創建邊緣空間」。我認爲這是清楚的，一旦我讀了幾次= P乾杯。 – Dan 2011-06-09 02:13:25

這應該做的伎倆。 jsfiddle.net demo

#app { 
border:1px solid #666; 
height: auto; 
overflow: auto; 
width: 900px; 
} 

#app-actionbar { 
color: #333; 
width: 900px; 
float: left; 
height: 45px; 
background: #D9D9DC; 
} 

#app-content { 
float: left; 
color: #333; 
background: #FFFFFF; 
height: 350px; 
width: 725px; 
display: inline; 
} 

#app-userinfo { 
color: #333; 
background:#F2F2F2; 
height: 350px; 
width: 175px; 
float: left; 
clear: left; 
}

來源

2011-06-09 01:58:05 RandomWebGuy

你應該考慮在你的答案中加入你的代碼的[jsFiddle demo]（http://jsfiddle.net/）。就目前而言，我沒有辦法看到代碼的渲染效果，因此我不太可能贊成你的答案。 – thirtydot 2011-06-09 02:10:14

你的權利，我的不好。添加。 – RandomWebGuy 2011-06-09 02:15:19

的QuirksMode Way©：

#app { 
    border:1px solid #666; 
    overflow: auto; 
    width: 100%; 
}

http://jsfiddle.net/CePt6/

從文章：

如果你想添加，比如說，一個邊框各地的花車（即。一個圍繞的邊界ainer）...

注意

至於頂部的縫隙，可以通過從#app-actionbar刪除margin-top: 10px;消除。

#app-actionbar { 
    color: #333; 
    width: 900px; 
    float: left; 
    height: 45px; 
    background: #D9D9DC; 
}

http://jsfiddle.net/CePt6/2/

編輯現在

，如果你的意思是塊向下移動內容，使#app寬度相同的寬度爲您#app-actionbar：

#app { 
    border:1px solid #666; 
    overflow: auto; 
    width: 900px; 
}

http://jsfiddle.net/CePt6/3/

來源

2011-06-09 02:00:17

這個問題有兩個部分：''我想在它周圍添加一個邊框，但它不起作用（並且它將內容向下移動）。「' – thirtydot 2011-06-09 02:08:56

@thirtydot - 是的，我只記得第二部分。看我最後的編輯。 ;） – 2011-06-09 02:10:14

我認爲他意味着他希望'內容'在側邊欄的右側，而不是在下面。 – thirtydot 2011-06-09 02:12:44

只是爲了笑笑，嘗試過，但有一些佈局變化。檢查是否有幫助。（demo here）

<div id="app"> 
    <div id="app-actionbar"> 
     topbar 
    </div> 
    <div id="app-userinfo"> 
     sidebar 
    </div> 
    <div id="app-content"> 
     content 
    </div> 
</div>

CSS：

#app { 
    border:1px solid #666; 
    clear:both; 
    position:absolute; 
} 

#app-actionbar { 
    color: #333; 
    width: 900px; 
    float: left; 
    height: 45px; 
    background: #D9D9DC; 
    margin-top:0px; 
} 

#app-content { 
    float: left; 
    color: #333; 
    background: red; 
    height: 350px; 
    width: 725px; 
    display: inline; 

    left:200px; 
    top:75px; 
} 

#app-userinfo { 
    color: #333; 
    background:#F2F2F2; 
    height: 350px; 
    width: 175px; 
    float: left; 
    top:65px; 

}

來源

2011-06-09 02:01:07 Lobo

這裏是你可以做什麼：

以下行添加到您的#APP DIV這樣的：

width:900px; 
min-height: 300px; 
overflow:auto;

以上是爲了在內部內容增加時自動擴展外部div。

但是，這會限制舊版本的IE，因爲它們沒有min-height屬性。

來源

2011-06-09 02:09:25 itsols

CSS/HTML佈局幫助

回答

相關問題