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

回答

相关问题