html - 为什么有宽度但没有 float 的 div 是 o 下一行？-6ren

html - 为什么有宽度但没有 float 的 div 是 o 下一行？

转载作者：太空宇宙更新时间：2023-11-04 03:06:16

25

4

我有以下标记:

<html>
 <head>
  <meta charset="utf-8">
  <title>float</title>
  <style>
   .layer1 {
    float: left; /* Обтекание по правому краю */
    background: #fd0; /* Цвет фона */
    border: 1px solid black; /* Параметры рамки */
    padding: 10px; /* Поля вокруг текста */
    margin-right: 20px; /* Отступ справа */
    width: 40%; /* Ширина блока */
   }
   .layer2 {
    width: 30px;
    float: left;
    }
  </style>
 </head> 
 <body> 
  <div class="layer1">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh 
   euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
  </div>
  <div class="layer2">
   Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel 
   illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio 
   dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te 
   feugat nulla facilisi.
  </div>
 </body>
</html>

我的问题如下:如果第 2 层有 float ，那么我的两个 div 是同一行；如果我从 layer2 中删除 float 并仅保留宽度，则此 div 将转移到下一行。为什么？

另外，我是前端的初学者，我需要学习它。哪些书籍/类(class)可以帮助我学习？提前致谢!

最佳答案

这里的“问题”不是一个，而是标准的 float 行为。检查我的代码片段以查看 .layer2 在哪里真的位于。 .layer2实际上开始于与 .layer1 相同的 x 坐标, 否则它不会在 .layer1 左右浮动, 但它宁愿是一个新专栏。如果那是你想要的，你需要给 layer2与 .layer2 一样多像素的 margin-left的宽度。

.layer1 {
  box-sizing: border-box;
  float: left;
  background: rgba(255, 230, 240, 0.5);
  border: 1px solid black;
  padding: 10px;
  width: 40%;
}
.layer2 {
  background: rgba(200, 200, 200, 0.5);
  width: 80px;
}
.additionalClass {
  margin-left: 40%;
}

<div class="layer1">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>
<div class="layer2">
  Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat.</div>

<div class="layer1">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>
<div class="layer2 additionalClass">
  Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.
</div>

除此之外，重要的是要知道 <div>属于所谓的 block 级元素。因此它有几个标准行为，其中之一是在它之前换行并在它之后换行。

例如， block 级元素的另一个标准行为是，如果您不指定 width或 max-width , 它捕获了它可以水平获得的所有空间。

如果您应用 float: left;，这两种标准行为都会丢失或 float: right;到元素。

关于html - 为什么有宽度但没有 float 的 div 是 o 下一行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30412248/

25

4

0

文章推荐： python - 填充 NaN 值

文章推荐： jquery - 从循环中的最后一个元素中删除逗号

文章推荐： python - Pandas 将个人逻辑应用于群体

文章推荐： css - 想要使用 CSS 制作自定义形状

python - HTTP 代码名称\\o/\\o- -o-/o\\在请求中代表什么？
在使用 requests 库中的状态代码时，我遇到了一些奇怪的事情。每个 HTTP 状态代码都有一个常量，有些具有别名(例如，包括 200 的复选标记): url = 'https://httpbin
javascript - 这两行是什么意思 : o[x] = o[x] || {}; o = o[x];
这是我得到的代码，但我不知道这两行是什么意思: o[arr[i]] = o[arr[i]] || {}; o = o[arr[i]]; 完整代码: var GLOBAL={}; GLOBAL.name
big-o - O(n) 的算法怎么可能也是 O(n^2)、O(n^1000000)、O(2^n)？
所以这个问题的答案What is the difference between Θ(n) and O(n)? 指出“基本上，当我们说算法是 O(n) 时，它也是 O(n2)、O(n1000000)、O
infinity - O 表示法，O(∞) = O(1)？
这是一个快速的想法；有人会说 O(∞) 实际上是 O(1) 吗？我的意思是它不依赖于输入大小？所以在某种程度上它是恒定的，尽管它是无限的。或者是唯一“正确”的表达方式 O(∞)？最佳答案无穷
big-o - O(日志(A))+ O(日志(B))= O(日志(A * B))？
这是真的: log(A) + log(B) = log(A * B) [0] 这也是真的吗？ O(log(A)) + O(log(B)) = O(log(A * B)) [1] 据我了解 O(f
big-o - O(N) + O(M) 和 O(N + M) 之间有什么区别。有没有？
我正在解决面试练习的问题，但我似乎无法找出以下问题的时间和空间复杂度的答案: Given two sorted Linked Lists, merge them into a third list i
big-o - O(O(f(n))) 是什么意思？
我了解 Big-Oh 表示法。但是我该如何解释 O(O(f(n))) 是什么意思呢？是指增长率的增长率吗？最佳答案 x = O(n)基本上意味着 x <= kn对于一些常量 k . 因此 x = O
javascript - o[str] 与 (o => o.str)
我正在编写一个函数，该函数需要一个对象和一个投影来了解它必须在哪个字段上工作。我想知道是否应该使用这样的字符串: const o = { a: 'Hello There' }; funct
algorithm - O(nlogn)+O(n)、O(nlogn) 和 O(nlogn + n) 之间的关系是什么？
直觉上，我认为这三个表达式是等价的。例如，如果一个算法在 O(nlogn) + O(n) 或 O(nlogn + n) 中运行(我很困惑)，我可以假设这是一个O(nlogn) 算法？什么是真相？
python - O(n) + O(n) = O(n)？
根据 O'Reilly 的 Python in a Nutshell 中的 Alex Martelli，复杂度类 O(n) + O(n) = O(n)。所以我相信。但是我很困惑。他解释说:“N 的两个
big-o - 大 O 符号 : differences between O(n^2) and O(n. log(n))？
O(n^2)有什么区别和 O(n.log(n)) ? 最佳答案 n^2 的复杂性增长得更快。关于big-o - 大 O 符号 : differences between O(n^2) and O(n
php - < o : p > & nbsp ; display error
每当我收到来自 MS outlook 的电子邮件时，我都会收到此标记 & nbsp ; (没有空格)哪个显示为？在 <>. 当我将其更改为 ISO-8859-1 时，浏览器页面字符集编码为 UTF-8
algorithm - Big-Oh : How can O(n) + O(n) + . .. + O(n) 等于 O(n^2)？
我很难理解 Algorithms by S. Dasgupta, C.H. Papadimitriou, and U.V. Vazirani - page 24 中的以下陈述它们将 O(n) 的总和表
big-o - 两次通过数组 O(n) 或 O(2n)
我在面试蛋糕上练习了一些问题，并在问题 2给出的解决方案使用两个单独的 for 循环(非嵌套)，解决方案提供者声称他/她在 O(n) 时间内解决了它。据我了解，这将是 O(2n) 时间。是我想错了吗，
c# - Java语法问题: O accept(ObjectVisitorEx visitor)
关于 Java 语法的幼稚问题。什么 T accept(ObjectVisitorEx visitor); 是什么意思？ C# 的等价物是什么？最佳答案在 C# 中它可能是: O Accept(
algorithm - O(nlogn) + O(n) 的时间复杂度是否只是 O(nlogn)？
假设我有一个长度为 n 的数组，我使用时间为 nlogn 的排序算法对它进行了排序。得到这个排序后的数组后，我遍历它以找到任何具有线性时间的重复元素。我的理解是，由于操作是分开发生的，所以时间是 O(
algorithm - O(1)+O(2)+ .... +O(n) 的阶和
总和 O(1)+O(2)+ .... +O(n) 的计算结果是什么？我在某处看到它的解决方案: O(n(n+1) / 2) = O(n^2) 但我对此并不满意，因为 O(1) = O(2) = co
big-o - 什么是大 O 符号？你是如何想出像 O(n) 这样的数字的？
这个问题在这里已经有了答案: 11 年前关闭。 Possible Duplicate: Plain english explanation of Big O 我想这可能是类里面教的东西，但作为一个自学
big-o - O(n) 算法的计算时间可以超过 O(n^2) 吗？
假设我有两种算法: for (int i = 0; i 2)更长的时间给定的一些n - 其中n这种情况的发生实际上取决于所涉及的算法 - 对于您的具体示例， n 2)分别时间，您可能会看到: Θ(n)
big-o - 感叹号在 big-o 中是什么意思，即 O(X!)？
这个问题在这里已经有了答案: Example of a factorial time algorithm O( n! ) (4 个回答) 6年前关闭。我见过表示为 O(X!) 的 big-o 示例但

首页

博学

6Ren·AI

商城

html - 为什么有宽度但没有 float 的 div 是 o 下一行？