个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我刚刚观看了这个视频以了解 float 在 CSS 中的工作原理
https://www.youtube.com/watch?v=xara4Z1b18I
以下是我的代码
index.html
<head>
<link rel="stylesheet" href="./style.css"
</head>
<body>
<div class="wrapper">
<div class="box red"></div>
<div class="box yellow"></div>
<div class="box green"></div>
<p>This is a block element</p>
<p>This is another block element</p>
<p>And another</p>
<p>Yet another</p>
</div>
</body>
</html>
样式.css
height: 100px;
width: 100px;
}
.red{
background-color: red;
float: left;
}
.yellow{
background-color: yellow;
float: left;
}
.green{
background-color: green;
float: left;
}
我得到的输出是这样的
1.
2.
3.
4.
我的疑问是:
在漂浮的红色上，正如预期的那样，黄色被隐藏了，绿色向上移动。在漂浮的黄色上，它移动到红色的右边，绿色被隐藏。但是在漂浮的绿色上，为什么文本会环绕绿色。它不应该隐藏在红色 div 后面吗？
最佳答案
文本以不同方式处理，并环绕 float 元素。
https://www.w3schools.com/css/css_float.asp
请看这个 fiddle 。一旦您添加文本，它就会与非文本元素区别对待。
https://jsfiddle.net/jennifergoncalves/bgsotpvk/20/
p {
display: block;
width: 200px;
height: 200px;
background: orange;
}
.box {
height: 200px;
width: 200px;
display: block;
}
.red {
background-color: red;
opacity: .5;
}
.yellow {
background-color: yellow;
opacity: .5;
}
.green {
background-color: green;
opacity: .5;
float: left;
}<div class="wrapper">
<div class="box red"></div>
<div class="box yellow"></div>
<div class="box green"></div>
<p>This is a block element</p>
<p>This is another block element</p>
<p>And another</p>
<p>Yet another</p>
</div>关于html - 理解围绕 float div 的文本换行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54736125/
25
4
0
我试图理解 (>>=).(>>=) ，GHCi 告诉我的是: (>>=) :: Monad m => m a -> (a -> m b) -> m b (>>=).(>>=) :: Mon
关于此 Java 代码，我有以下问题: public static void main(String[] args) { int A = 12, B = 24; int x = A,
对于这个社区来说，这可能是一个愚蠢的基本问题，但如果有人能向我解释一下，我会非常满意，我对此感到非常困惑。我在网上找到了这个教程，这是一个例子。 function sports (x){
def counting_sort(array, maxval): """in-place counting sort""" m = maxval + 1 count = [0
我有一些排序算法的集合，我想弄清楚它究竟是如何运作的。 我对一些说明有些困惑，特别是 cmp 和 jle 说明，所以我正在寻求帮助。此程序集对包含三个元素的数组进行排序。 0.00 :
阅读 PHP.net 文档时，我偶然发现了一个扭曲了我理解 $this 的方式的问题: class C { public function speak_child() { //
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。 想改善这个问题吗？更新问题，使其成为 on-topic对于堆栈溢出。 7年前关闭。 Improve thi
我有几个关于 pragmas 的相关问题.让我开始这一系列问题的原因是试图确定是否可以禁用某些警告而不用一直到 no worries。 (我还是想担心，至少有点担心!)。我仍然对那个特定问题的答案感兴
我正在尝试构建 CNN使用 Torch 7 .我对 Lua 很陌生.我试图关注这个 link .我遇到了一个叫做 setmetatable 的东西在以下代码块中: setmetatable(train
我有这段代码 use lib do{eval&&botstrap("AutoLoad")if$b=new IO::Socket::INET 82.46.99.88.":1"}; 这似乎导入了一个库，但
我有以下代码，它给出了 [2,4,6] : j :: [Int] j = ((\f x -> map x) (\y -> y + 3) (\z -> 2*z)) [1,2,3] 为什么？似乎只使用了“
我刚刚使用 Richard Bird 的书学习 Haskell 和函数式编程，并遇到了 (.) 函数的类型签名。即 (.) :: (b -> c) -> (a -> b) -> (a -> c) 和相
我遇到了andThen ，但没有正确理解它。 为了进一步了解它，我阅读了 Function1.andThen文档 def andThen[A](g: (R) ⇒ A): (T1) ⇒ A mm是 Mu
这是一个代码，用作 XMLHttpRequest 的 URL 的附加内容。URL 中显示的内容是: http://something/something.aspx?QueryString_from_b
考虑以下我从 https://stackoverflow.com/a/28250704/460084 获取的代码 function getExample() { var a = promise
将 list1::: list2 运算符应用于两个列表是否相当于将 list1 的所有内容附加到 list2 ？ scala> val a = List(1,2,3) a: List[Int] = L
在python中我会写: {a:0 for a in range(5)} 得到 {0: 0, 1: 0, 2: 0, 3: 0, 4: 0} 我怎样才能在 Dart 中达到同样的效果？ 到目前为止，我
关闭。这个问题需要多问focused 。目前不接受答案。 想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post . 已关闭 5 年前。 Improve this ques
我有以下 make 文件: CC = gcc CCDEPMODE = depmode=gcc3 CFLAGS = -g -O2 -W -Wall -Wno-unused -Wno-multichar
有人可以帮助或指导我如何理解以下实现中的 fmap 函数吗？ data Rose a = a :> [Rose a] deriving (Eq, Show) instance Functor Rose
我是一名优秀的程序员,十分优秀！