CSS float:none 和 margin-right

发布于 2024-12-01 18:23:07 字数 348 浏览 2 评论 0原文

我刚刚学习了一些有关响应式网页设计或流畅布局的教程。

在示例中，在较小的屏幕尺寸下，3 列布局会自动转换为 2 列布局。他们通过 2 个 CSS 属性使这成为可能；

float:none
margin-right:0

您能帮我理解这是如何发生的以及保证金权利是根据什么计算的吗？

链接到示例 http://www.alistapart.com/articles/responsive-web-design /

原文

I was just going through some tutorial on responsive web design or fluid layouts.

In the example, a 3-column layout automatically converts to a 2-column layout at lower screen sizes. They have made that possible through 2 CSS properties;

float:none
margin-right:0

Could you please help me understand how this happens and margin-right is calculated based on what?

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

妳是的陽光 2024-12-08 18:23:07

这篇文章无疑是向您展示我如何做到这一点的示例，因此您可以根据您的特定需求进行调整。你必须更进一步。希望以下解释和@Wesley 的回答能帮助您做到这一点。

float:none

通过在元素（之前是浮动的）上设置 float:none，这会导致这些元素在屏幕尺寸的情况下彼此堆叠。浮动过去导致元素并排排列。

margin-right:0

在此示例中，他们设置 margin-right:0 以便这些图像在右侧很好地排列。如果您注意到的话，这些图像是对于这些尺寸的屏幕来说最右边的图像。如果 margin-right 未设置为零，它将继承 .figure 的样式，该样式确实应用了 margin-right。

回复收藏 0 原文

罪歌 2024-12-08 18:23:07

您链接到的示例包含对答案的详尽解释，超出了我在这里所能提供的范围。他们使用 CSS 媒体查询来确定视口的大小：

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

CSS 文件中的示例：

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

使用标记的 media 属性的示例：

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

http://www.alistapart.com/articles/responsive-web-design /
值得庆幸的是，W3C 创建了媒体查询作为 CSS3 的一部分
规范，改进媒体类型的承诺。某媒体
查询不仅使我们能够定位某些设备类别，而且还能够定位
实际检查设备渲染的物理特性
我们的工作。例如，随着最近移动 WebKit 的兴起，
媒体查询成为一种流行的客户端技术，用于提供
为 iPhone、Android 手机等定制样式表。到
这样做，我们可以将查询合并到链接样式表的媒体中
属性：
查询包含两个组成部分：
媒体类型（屏幕），以及
括号内的实际查询，包含
要检查的特定媒体功能（最大设备宽度），然后是
目标值（480px）。
简单来说，我们询问设备的水平分辨率
(最大设备宽度) 等于或小于 480px。如果测试
通过——换句话说，如果我们在小屏幕上观看我们的作品
iPhone 等设备 — 那么该设备将加载 shetland.css。
否则，该链接将被完全忽略。

The example you linked to contains a thorough explanation of the answer, more than I can provide here. They are using CSS media queries to determine the size of the viewport:

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

Example in a CSS file:

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

Example using the media attribute of the <link> tag:

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

http://www.alistapart.com/articles/responsive-web-design/
Thankfully, the W3C created media queries as part of the CSS3
specification, improving upon the promise of media types. A media
query allows us to target not only certain device classes, but to
actually inspect the physical characteristics of the device rendering
our work. For example, following the recent rise of mobile WebKit,
media queries became a popular client-side technique for delivering a
tailored style sheet to the iPhone, Android phones, and their ilk. To
do so, we could incorporate a query into a linked style sheet’s media
attribute:
The query contains two components:
a media type (screen), and
the actual query enclosed within parentheses, containing a
particular media feature (max-device-width) to inspect, followed by
the target value (480px).
In plain English, we’re asking the device if its horizontal resolution
(max-device-width) is equal to or less than 480px. If the test
passes—in other words, if we’re viewing our work on a small-screen
device like the iPhone—then the device will load shetland.css.
Otherwise, the link is ignored altogether.