CSS：浮动，绝对位置和溢出

HTMLCSS：浮动，绝对位置和溢出

<div class="wrapper"> 
    <div class="image"></div> 
    <div class="copy">blabla</div> 
    <div class="outside"></div> 
</div>

CSS

.wrapper { width: 960px; margin: 0 auto; position: relative; } 
.image { float: left; } 
.outside { position: absolute; top: 0; left: -20px; }

我想.outside到.wrapper外扩，但有两个问题：按原样.wrapper不向下延伸以适应浮动的.image;将.wrapper设置为overflow: auto修复了高度问题，但隐藏了绝对定位的.outside。我怎样才能让身高自动伸展，而不是将绝对定位的元素切断？

编辑：我的包装设置为相对，对不起 - 忘了补充一点。为了进一步澄清，这里有一些蹩脚图：

enter image description here

编辑2：我把它加入了包装的图像周围的工作和复制并将其设置为overflow: auto。我想避免不必要的标记，但是哦...谢谢大家！

来源

2011-08-11 Alex

糟糕的图表在哪里？我只看到3个很酷的图':)）' –

好吧，上面是3个很棒的图。 :) – Alex

你也可以通过在'image'类之后设置一个'clearfix'来完成它。 –

通过添加与overflow: auto额外的包装器.image和.copy解决。

来源

2011-08-12 15:43:12 Alex

浮动包装（添加浮动：左边的CSS为.wrapper），或在浮动图像后放<BR style="clear: both;">。

将绝对div放在包装外面，而不是放在包装里面。

但是你为什么要做绝对位置？我敢打赌，你不需要那样做，如果你提供了关于你正在尝试做什么的更多信息，那么可能会有其他选择。

来源

2011-08-11 18:16:14 Ariel

绝对位置将绝对定位到身体，除非其父母的位置不是静态位置。如果你想让它绝对定位到父（.wrapper），你需要给.wrapper的位置，如position:relative;

然后，添加一个div来清除浮动：

<div class="wrapper"> 
    <div class="image"></div> 
    <div class="copy">blabla</div> 
    <div class="clear"></div> 
    <div class="outside"></div> 
</div>

CSS：

.wrapper { 
    background-color:red; 
    width: 200px; 
    margin: 0 auto; 
    position:relative; 
} 
.clear { 
    clear:both; 
} 
.image { 
    float: left; 
} 
.outside { 
    background-color:yellow; 
    position: absolute; 
    top: 0; 
    left: -20px; 
    width:100px; 
    height:20px; 
}

演示：http://jsfiddle.net/AlienWebguy/6Fmy2/

来源

2011-08-11 18:16:16 AlienWebguy

你只需要清除你的浮动。

添加另一个空div像：

<div class="wrapper"> 
    <div class="image"></div> 
    <div class="copy">blabla</div> 
    <div class="outside"></div> 
    <div class="clearfix"></div> 
</div>

CSS：

.clearfix { clear: both; }

来源

2011-08-11 18:17:01 Paulpro

CSS：浮动，绝对位置和溢出

回答

相关问题