CSS：如何在#header和#content之間移動#thumbnails與CSS（沒有JavaScript，動態寬度和高度，不改變HTML）？

如何使用CSS（無JavaScript）在#header和#content之間向上移動#thumbnails，而不更改HTML並保留所有div標籤的動態寬度和高度？
代碼能夠在http://jsfiddle.net/laukstein/XdJxu/CSS：如何在#header和#content之間移動#thumbnails與CSS（沒有JavaScript，動態寬度和高度，不改變HTML）？

HTML：

<div id=container> 
    <div id=header>1. header</div> 
    <div id=content>3. content</div> 
    <div id=thumbnails>2. thumbnails</div> 
</div>

CSS：

html,body,* html #container{height:100%;} 
html,body{ 
    margin:0; 
    padding:0; 
    overflow:inherit; 
} 
#container{ 
    width:80%; 
    min-height:100%; 
    margin:0 auto; 
    background-color:#ccc; 
} 
#content{ 
    background-color:#ececec; 
} 
#thumbnails{ 
    background-color:#ffdc71; 
}

預期結果（跨瀏覽器，動態寬度和高度，沒有JS，沒有HTML變化）：

1. header 
    2. thumbnails 
    3. content

來源

2011-02-15 Binyamin

爲什麼沒有JS的特定原因？這不能沒有JS和動態高度... – 2011-02-15 16:22:15

@Myles灰色：我會喜歡搜索引擎和瀏覽器沒有JS支持渲染它1,2,3和動態寬度和高度我需要[響應網絡設計（http://www.alistapart.com/articles/responsive-web-design/）。 – Binyamin 2011-02-15 17:44:14

Live Demo

比較髒，因爲它不是動態的高度，但它是一種概念證明，我所做的就是添加：

#content{ 
    margin-top:15px; 
} 
#thumbnails{ 
    margin-top:-35px; 
}

Live Demo with JS - 無JQuery的現在。感謝@AndyE非JQ版本

來源

2011-02-15 16:18:08

不知道#thumbnails的高度是不可能完成的，因爲那是你必須向下移動#content（通過定位或margin-top）的像素數量。

來源

2011-02-15 16:27:36 Laph

CSS：如何在#header和#content之間移動#thumbnails與CSS（沒有JavaScript，動態寬度和高度，不改變HTML）？

回答

相關問題