CSS：位置：絕對的權力沒有水平滾動

我有這樣的佈局在這裏的演示：http://jsfiddle.net/LwRva/CSS：位置：絕對的權力沒有水平滾動

我試圖做到的，是一個佈局是680像素寬對於大多數用戶，但只有480像素 - 無對於那些使用較小分辨率的水平滾動條。（Imagine 680px實際上是1180px，而480px是980px - 僅僅用於在JSFiddle中使用這個）。

它本質上是一個3列的div佈局，其中如果頁面不適合他們，左右欄就會隱藏。

我已經有了完全按照我想要的那樣工作的左列，它不會改變水平滾動條，如果它不適合頁面。我的問題是在右欄。由於消極保證金權利不以相同方式運作。

任何想法？

來源

2011-03-09 Kobius

只是一個快速的建議：你有沒有考慮CSS3媒體查詢？這可能更容易：http://www.w3.org/TR/css3-mediaqueries/ – RoToRa

@RoToRa對於媒體是正確的。爲你的佈局可能的CSS可能是以下幾點：

@media screen and (max-width: 580px) {.featured-box-left {display:none} } 
@media screen and (max-width: 480px) { 
.featured-box-left,.featured-box-right{display:none;} 
}

當屏幕的寬度爲580（長）然後隱藏.featured-box-left。如果屏幕是480px或更低，則隱藏左右兩側。

演示：http://jsfiddle.net/LwRva/6/

你想土特產品實現一般是什麼電話Responsive Web Design。列表除了有一個偉大的文章，你可以找到翔實的：http://www.alistapart.com/articles/responsive-web-design/

來源

2011-03-09 11:29:00 Sotiris

天才！非常感謝你們。我之前沒有使用這些媒體查詢，但它們非常有用。謝謝！ – Kobius

@Kobius歡迎您:) – Sotiris

CSS：位置：絕對的權力沒有水平滾動

回答

相關問題