CSS float：none和margin-right

我剛剛通過一些關於響應式web設計或流體佈局的教程。CSS float：none和margin-right

在此示例中，3列布局自動轉換爲2列布局，屏幕尺寸較小。他們通過2個CSS屬性實現了這種可能性;

float:none 
margin-right:0

請你幫我理解這是怎麼發生的，並且保證金的權利是基於什麼計算的？

鏈接到例如http://www.alistapart.com/articles/responsive-web-design/

來源

2011-08-26 testndtv

也許你應該閱讀文章，看看例子，而不是簡單地發佈在這裏... – nfechner

我想學習如何從頭開始構建div佈局..但是我沒有找到任何網站，這真正解釋了建築物塊像我知道什麼是浮動，什麼填充，邊緣意味着......但不知道如何正確使用它們來構建設計/佈局..此外，上面的網站並沒有給出詳細信息.. – testndtv

這篇文章絕對是一個演示你如何做它的例子，所以你可以把它適應你的特殊需求。你將不得不超出一步。希望以下解釋和@衛斯理的答案將幫助你做到這一點。

浮動：無

通過設置浮動：在元件上（先前浮動）沒有限制，這會導致這些元件以堆疊在彼此爲屏幕的那些尺寸的頂部。浮動透氣性導致元素並排排列。

餘量右：0

在這個例子中，它們被設置餘量右：0，使得本不可想象很好地排隊在右手側。如果您注意到，那些圖像是那些屏幕尺寸最大的。如果保證金權利未設置爲零，則它將繼承.figure的風格，其中的具有應用了保證金的權利。

來源

2011-08-26 20:36:12 scottheckel

Thx。 .how如何使margin-right：0使它與右邊對齊......就像一般來說，margin-right如何知道參考點是什麼？ – testndtv

*圖像的其他所有LI都有一個右邊距，這就是圖像之間的溝槽感。如果在最右邊的邊距不是零，它會給你一個陰溝或將圖像推到下一行（在ALA文章的情況下，它將它推到下一行）。所以它不會將它們對準正確的位置，只是讓它們坐在正確的位置。那有意義嗎？ – scottheckel

您鏈接到該示例包含答案的一個全面的解釋，比我更可以在這裏提供。他們正在使用CSS媒體查詢來確定視口的大小：使用media屬性<link>標籤

@media screen and (max-device-width: 480px) { 
    .column { 
    float: none; 
    } 
}

例：

<link rel="stylesheet" type="text/css" 
    media="screen and (max-device-width: 480px)" 
    href="my-media-specific-stylesheet.css" />

在CSS文件

http://www.w3.org/TR/css3-mediaqueries/

例

http://www.alistapart.com/articles/responsive-web-design/

謝天謝地，W3C創建了媒體查詢，作爲CSS3 規範的一部分，改進了媒體類型的承諾。媒體查詢使我們不僅可以定位某些設備類別，而且還可以定位到實際檢查設備呈現我們的工作的物理特徵。例如，隨着移動WebKit近期的興起，媒體查詢成爲客戶端技術，用於向iPhone，Android手機等客戶提供量身定製的樣式表。要做到這一點，我們可以納入查詢到鏈接樣式表的媒體屬性：

查詢中包含兩個部分：

媒體類型（屏幕），並

括號內包含的實際查詢，其中包含要檢查的特定媒體特徵（最大設備寬度），接着是目標值（480px）的。

用簡單的英文，我們詢問設備水平分辨率（max-device-width）是否等於或小於480px。如果測試傳遞，換句話說，如果我們正在使用小屏幕設備（如iPhone）查看我們的工作，則設備將加載shetland.css。否則，該鏈接將被完全忽略。

來源

2011-08-26 18:30:51

CSS float：none和margin-right

回答

相關問題