作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
在下面的引导网格示例中,它使用 col-sm 和 col-sm-push/pull。col-sm-push 指定了左/右值(偏移量)。
我不太清楚它是如何工作的。
第二个 float 元素来到第一个 float 元素的左侧。
当left/right涉及float时,浏览器如何确定其位置?有没有引用指出?
<div class="row">
<div class="col-sm-4 col-sm-push-8">.col-sm-4 .col-sm-push-8</div>
<div class="col-sm-8 col-sm-pull-4">.col-sm-8 .col-sm-pull-4</div>
@media (min-width: 768px) .col-sm-pull-4 {
right: 33.33333333%;
}
@media (min-width: 768px) .col-sm-8 {
width: 66.66666667%;
}
最佳答案
首先:W3schools 是一个非常糟糕的文档引用,请尝试 MDN(Mozilla 开发者网络)或 W3C 官方网站 (w3.org) 获取文档。
W3 关于 float 的说法如下(右):
Similar to 'left', except the box is floated to the right, and content flows on the left side of the box, starting at the top.
所以这意味着如果您将第一个元素向右浮动,第二个元素将在左侧有空间并尝试将自己定位在那里。
关于html - 左/右浮动时如何计算位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30485998/
我是一名优秀的程序员,十分优秀!