如何在不與CSS鬥爭的情況下實現此佈局

我知道這裏有幾個關於這個問題的問題，但我有一個相當獨特的困境。我正在處理一個模板，該模板必須包含某些標記，並且必須與上載代碼後添加到模板中的其他元素一起使用。我不擔心這一點，但我有一段時間試圖讓頁腳顯示在頁面的底部。我無法修改任何關於頁腳的東西，它顯示在我用作包裝的div底部。問題是，如果我將高度設置爲固定值，那麼在評論div與頁腳重疊之前，只能進行很多評論。我已經嘗試了幾種不同的解決方案，包括將容器div的高度設置爲auto，將溢出設置爲auto，將下邊距設置爲65（頁腳的高度），並將溢出設置爲滾動評論div（導致非常鬆散的註釋）。如何在不與CSS鬥爭的情況下實現此佈局

Here is an example of the problem and the template as it stands.

下面是div容器的CSS樣式（DIV ID =主）

#Main { 
margin: 0px auto auto auto; 
background-color: #808080; 
font-family: Verdana, Geneva, Tahoma, sans-serif; 
font-size: medium; 
font-variant: normal; 
color: #FFFFFF; 
width: 900px; 
position: relative; 
}

下面是註釋DIV

#Comments { 
background-color: #008080; 
width: 450px; 
height: auto; 
top: 1750px; 
left: 450px; 
position: absolute; 
overflow: auto; 
}

的CSS樣式和這裏是如何的divs堆疊在身上

<div id="Main"> 
... 
<div id="Comment_Form"> 
<!--[COMMENT_FORM=400,200]--> 
</div> 

<div id="Comments"> 
<!--[COMMENTS=400]--> 
    Comments 
</div> 
</div>

由於頁面會變得很沉重，我試圖保持代碼的輕量級（並且可能很糟糕）。

感謝您的幫助，如果有人需要，我會立即發佈模板。

編輯：

好了，它發生，我認爲一）我需要重做的CSS和我有下降的div，和b）我不知道如何使用純CSS來做到這一點，或在至少不會像你們中的一個人所說的那樣戰鬥。我試圖實現的是這樣的： Layout image

我不知道如何做到這一點。和任何幫助將不勝感激（以及任何方式，以避免每個元素在其自己的股利）

來源

2010-12-15 salsa

你似乎真的在你的CSS頁面上。你的大部分元素完全位於你的#Main課程中。這將迫使你指定比你想要的更多的佈局。這也意味着，如果您有不同數量的評論或動態內容，您會發現擴展您的內容容器並不會妨礙其他人的發展。

我強烈建議您查看CSS框架或利用網格佈局的方法，例如Nicole Sullivan's OOCSS framework。

你會發現結構（它有很多很好的，可行的例子）很容易遵循，並且更容易適應你想要實現的各種佈局。

來源

2010-12-15 23:37:23

是的，我擔心我將不得不重做佈局。感謝您的鏈接，我會研究它。 – salsa 2010-12-16 01:18:18

我沒有任何測試中，我將如何在圖像上的代碼寫佈局：

HTML：

<div id="header" class="centered"></div> 
<div id="content" class="centered"> 
    <div id="navigation"></div> 
    <div id="content"></div> 
</div> 
<div id="comments" class="centered"> 
    <div id="author-comments" class="centered"></div> 
    <div class="centered"> 
    <div id="comment-field"></div> 
    <div id="user-comments"></div> 
    </div> 
</div>

CSS：

* { margin:0px; padding:0px } 
html { height:100% } 
body { height:100% } 
.centered { position:relative; margin:0 auto; width:960px } 
#header { height:100px; background:#333 } 
#content { overflow:hidden } 
#author-comment { overflow:hidden; margin:30px auto } 
#comment-field { position:relative; float:left; width:480px; overflow:hidden } 
#user-comments { position:relative; float:left; width:480px; overflow:hidden }

對不起，得現在沒有時間去測試了，但是在第一視圖中，我沒有看到這個代碼有任何問題 - 寫評論，如果有的話無法工作

來源

2010-12-16 05:12:17 bogatyrjov

我希望這是有幫助的。

這是一個非常基本的佈局，您可以使用。

在你的CSS：

#header, #content, #comments{ 
    margin: 0 auto; 
    width: 960px; 
    overflow: hidden; 
    } 
    #author-comments{ 
    width: 100%; 
    } 
    #comment-box{ 
    float: left; 
    width: 50%; 
    } 
    #comment-list{ 
    float: right; 
    width: 50%; 
    }

在您的標記：

<div id="header"> 
    Header 
</div> 
<div id="content"> 
    Contents 
<div> 
<div id="comments"> 
    <div id="author-comments"> 
    Author comments 
    </div> 
    <div id="comment-box"> 
    Comment box 
    </div> 
    <div id="comment-list"> 
    Comment list 
    </div> 
</div>

據您使用的標記是有道理的，而不風格是非常重要的。不要將div看作純文本框，而應將其看作爲給文檔結構化的實際內容容器。

在附註中，您提到您擔心div的數量會讓您的文件保持亮起，從而補償您使用的圖像數量。不要擔心這一點。與文件大小相比，文本文檔（如HTML）沒有任何優勢。不過，他的意思並不是說你應該把標記當成是免費的;）

最後一件事。我注意到你正在使用<img>元素來渲染你的裝飾圖像。嘗試使用CSS將它們設置爲相應的<div>中的背景圖像。這不僅可以幫助您更清晰和更容易地實施結構，還可以在表示內容的圖像和表示裝飾的圖像之間劃出一條線。

來源

2010-12-24 04:11:55 cesarsalazar

如何在不與CSS鬥爭的情況下實現此佈局

回答

相關問題