代码之家 › 专栏 › 技术社区 › Water Cooler v2

为什么我的div在左边有这么多的空白,而我却把它漂到左边?

css

Water Cooler v2 · 技术社区 · 7 年前

我是 trying the shape-outside property 而且它还不能在firefox 60.0.1上运行,这很好,因为它可能还没有在浏览器上得到支持,而且由于浏览器支持的存在,它在chrome v66上也可以运行。

但我的问题是:为什么我的左边有空白 div#inner 当我指定 float:left 在它漂向左边之前什么都没有?

下面是我的页面在firefox和chrome浏览器上的外观,下面是代码。

在Firefox v60.0.1上

铬V66

div#outer {
  border: 2px solid green;
}

div#inner {
  float: left;
  
  font-family: Verdana;
  font-size: 10em;
  border: 12px solid rgba(255, 0, 0, 0.5);
  width: 80%;
  overflow: hidden;
  text-align: center;
  padding: 20px;
  margin: 10px;
  
  background-color: cyan;
  background-clip: padding-box;
  
  clip-path: circle(50%);
  
  shape-outside:  circle(50%);
  -webkit-shape-outside:  circle(50%);
}

<div id = "outer">
  <span>Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world!</span>
  <div id = "inner">Foo bar</div>
<span>Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world!</span>
</div>

1 回复 | 直到 7 年前

Water Cooler v2 7 年前

我稍加修改就找到了答案。@康尼索在评论部分对这个问题说得对。

基本上,我删除了 clip-path 那东西发出咔嚓声。

以下是一些可以澄清我的一些误解的意见:

剪辑路径 和 shape-outside 彼此不依赖。更具体地说, 外形 不依赖于 剪辑路径 .
剪辑路径 不会更改元素的大小。它只会成功出现小得多。

所以,元素的部分被剪掉了 仍然存在于左右两侧 . 只是因为我有 外形 使内联内容环绕我的右侧 div ,右侧似乎被剪断了,但左侧没有。实际上,这两个边都没有被剪断。他们只是重新绘制,以便使视觉外观更小。