Warning: file_get_contents(/data/phpspider/zhask/data//catemap/4/powerbi/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Css 是否将p标记自动溢出作为站点范围的默认值?_Css_Overflow_Paragraph - Fatal编程技术网

Css 是否将p标记自动溢出作为站点范围的默认值?

Css 是否将p标记自动溢出作为站点范围的默认值?,css,overflow,paragraph,Css,Overflow,Paragraph,我在我的网站上有大量的实例,其中有一个图像漂浮在文本的一侧。当文本足够长,可以在图像下方环绕时,我不希望它占据div的整个宽度,而是希望所有文本保持垂直对齐 我可以通过将溢出自动设置为p标记来实现这一点。我已经这样做了很多次了,我正在考虑将这条规则应用于所有的p标签。这样做的风险/不利方面是什么?我做了个测试,快速看了一眼,一切看起来都很好 <div> <img src="http://upload.wikimedia.org/wikipedia/commons/5/5b/

我在我的网站上有大量的实例,其中有一个图像漂浮在文本的一侧。当文本足够长,可以在图像下方环绕时,我不希望它占据div的整个宽度,而是希望所有文本保持垂直对齐

我可以通过将溢出自动设置为p标记来实现这一点。我已经这样做了很多次了,我正在考虑将这条规则应用于所有的p标签。这样做的风险/不利方面是什么?我做了个测试,快速看了一眼,一切看起来都很好

<div>
  <img src="http://upload.wikimedia.org/wikipedia/commons/5/5b/Ultraviolet_image_of_the_Cygnus_Loop_Nebula_crop.jpg" />

  <p>Here is my text Here is my text Here is my text Here is my text Here is my text Here is my text Here is my text Here is my text Here is my text Here is my text Here is my text Here is my text Here is my text Here is my text Here is my text</p>
</div>

img {
  width: 200px;
  height: 200px;
  float: left;
}
div {
  width: 300px;
  margin: auto;
}
p {
  overflow: auto;
}

这里是我的文字这里是我的文字这里是我的文字这里是我的文字这里是我的文字这里是我的文字这里是我的文字这里是我的文字这里是我的文字这里是我的文字这里是我的文字这里是我的文字这里是我的文字这里是我的文字这里是我的文字

img{ 宽度:200px; 高度:200px; 浮动:左; } div{ 宽度:300px; 保证金:自动; } p{ 溢出:自动; }

因为规范中说
溢出:auto
依赖于用户代理,所以这样做的风险在于它不能在所有浏览器中实现所需的行为。此外,您可能会在某些浏览器上看到滚动条,因为规范建议对溢出的元素使用这种行为

自动

“auto”值的行为依赖于用户代理,但应为溢出框提供滚动机制

其工作方式是创建一个新的


还有,我找到了一篇关于它的文章。似乎提到在某些浏览器中设置宽度或高度对于正确的功能很重要。

风险/缺点是如果您不想要上述行为,那么您必须在那些您想要不同行为的
标记上替换
溢出:自动

我想问自己的问题是:

  • 将来谁将维护/开发此网站

  • 他们是否希望自己的
    标记以同样的方式工作

  • 对他们来说,推翻这种行为容易吗

在大多数情况下,我倾向于使用一个简单的CSS类,我可以自己应用于
标记。任何未来的开发人员都将能够看到应用于p标记的类并复制行为。任何想要普通
的人都不会应用该类

对于主题类型样式,我只喜欢这样的总括元素选择器(即“我希望所有的
标签在这个网站上看起来都是特定的”。如果你不希望这样,我愿意为prupose创建一个具有良好描述性名称的类


然而,最终的选择权在你。

这始终是一种判断。根据我的经验,样式标签直接会导致无意的副作用,并使长期维护变得更加困难。(如果你真的需要一个“p”标签作为后面的段落怎么办

我的建议是在div中使用一个类,并在所有相关选择器之前添加它。同时查看新的html5标记“figure”和“figcaption”

.media-box {
  width: 300px;
  margin: auto;
}

.media-box img {
   /* ... */
}

.media-box p {
   /* ... */
}

溢出:自动段落是一种不好的做法。段落的本质是环绕。这里有很多技巧可以使用。但我只需要将段落和图像设置为各自的宽度,这样它们就只占用一定的空间

article
  img
  p

article img{float: left, width: 20%}
article p{float: left, width: 80%}
这将是您的最佳实践,这是因为这允许您的元素只占用您请求的指定宽度,不多也不少。而不会覆盖其他元素的空间。老实说,不需要溢出:任何内容


这很有趣。通常我会用一个列布局来实现这一点,但是AutoWorks。我想知道多个图像会发生什么。需要考虑的是,它只会改变与图像直接交互的<代码> P<代码>元素。例如:我只是看了一下FF,IE和Chrome,它们看起来都是。呈现相同。但较旧的浏览器可能存在问题。对于依赖于代理的信息为+1。规范建议“溢出框”使用滚动条。假设没有设置宽度或高度(或其他压缩尺寸的方式),则
p
元素将永远不会溢出。请澄清,因为您的措辞似乎一直暗示建议使用滚动条。(我可能对您的措辞理解过多)