logo标签列表

CSS溢出：强制一个div溢出

htmlcss
6

有没有可能让一个子元素溢出其父 div？

我已经隐藏了所有的子 div 以防止溢出，但是我需要其中一个子元素溢出并浮动在限制的父元素外面。

请访问http://sandbox.pixelcraftwebdesign.com/engineering 并使用随机数进行一些计算。

右上角的小红数字需要浮动在输出 div 的外部。

1
我认为jQuery可能会有所帮助。请发布一些代码。 - Jared Farrish
+1 一些代码会有帮助。 - matchew
该页面正在以怪异模式运行。将其放入标准模式以在各种浏览器中获得一致的结果。 - gilly3
如果你想让那个小红框完全从输出框中消失，只需从输出div中删除position:relative;，这样框就会向右浮出。但由于它运行的怪异性，如@gilly3所说，它可能适用也可能不适用于你。在使用Chrome的检查工具时，它对我有效。 - robx
你的 doctype 控制着你的渲染模式（quirks 或 standards）。你的指定了 HTML3.2，这将把你的文档置于 quirks 模式下。有许多编写 doctype 的方式。这里有一篇不错的文章：http://www.alistapart.com/articles/doctype/。但是，我的偏好是保持简短明了。这个简洁的语法将使你的文档处于 standards 模式下：<!DOCTYPE html>。 - gilly3
现在看起来怎么样？ :) - Kevin Brown
4个回答
5

我不完全确定你需要什么，但这里有一个示例，展示了一个子div浮动在外面并显示其所有内容：http://jsfiddle.net/dcpDa/

<div id="parent">
    <div class="dontShow">Dont Show All Of Me</div>
    <div class="dontShow">Dont Show All Of Me</div>
    <div class="dontShow">Dont Show All Of Me</div>
    <div class="dontShow">Dont Show All Of Me</div>
    <div class="doShow">Okay, Show All Of Me</div>
    <div class="dontShow">Dont Show All Of Me</div>
    <div class="dontShow">Dont Show All Of Me</div>
    <div class="dontShow">Dont Show All Of Me</div>
</div>

CSS：

div { 
    width: 5em; /*constrain div */
    height: 1em; 
    border: 1px solid #aaa; 
    background-color: #ccc;
}
.dontShow { overflow: hidden; } /* do not show overflow */

.doShow { 
    width: auto; /* over ride constraints and show all */
    height: auto;  
    position: absolute; /* break from flow */ 
    left: 15em; /* position where you want */
}

最近我发现了两篇关于CSS定位的文章，它们非常有用：
CSS浮动布局101
CSS定位101

3
1

假设您希望宽度保持不变：

  1. 从.output中删除overflow:hidden。
  2. 将.output .right设置为width:257px;overflow:hidden。
  3. 将.result-rh, .result-temp设置为width:241px。

此修复方法允许容器溢出，但在右侧隐藏溢出。 它还为右侧提供了适当的大小，以防止结果 SPAN 被裁剪。

在Firefox 3.6.17中对我有效。 应该也适用于其他浏览器。

1
好的修复。我很尴尬，我没能第一时间发现它... :) - Kevin Brown
0

使用position: absolute;在您想要显示的子元素上。然后，您可以使用top、left、height和width来将其定位到所需位置。

4
如果父元素设置为overflow:hidden，并且你将子元素定位到外部，那么子元素将不可见。 - Matthew Rapati
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接