Question

我在 jsfiddle ：

中有以下HTML和CSS

<div class="MyBox">

    <div class="TopText">text here</div>    
    <div class="MyText">text</div>
    <div class="MyText">text</div>
    <div class="MyText">text</div>
    <div class="MyText">text</div>
    <div class="MyText">text</div>
    <div class="OtherText1">text1</div>
    <div class="OtherText2">text2</div>

</div>

.MyBox{
    padding:10px 10px;
    position:absolute;
    margin:10px 0px;
    border:5px solid black;}

.TopText{clear:right;}

.MyText{
    float:left;
    margin:10px 10px;}

.OtherText1{
    clear:left;
    float:left;
    margin:10px 10px;}

.OtherText2{
    float:left;
    margin:10px 0px 10px 50px;}

MyBox类的div需要绝对定位。问题是当我在容器div中没有OtherText div时，MyBox div很好地调整了自己的大小，但是如果我有这些div，那么看起来容器div通过添加它们的宽度来调整自身的大小。 此问题似乎仅在Chrome 中可见，这相当奇怪。

我该如何解决？

感谢。

Answer 1

疯狂技巧：将float:left添加到绝对位置MyBox以获得额外的收缩力：

http://jsfiddle.net/SyKfm/2/

.MyBox {
    position:absolute;
    float: left;

前几天有一个类似的问题，但它有一个绝对。定位最大宽度div：

Div smart width

Answer 2

为什么会这样？我真的不知道，但你怎么能解决它？我知道这不是最优的，但你可以在2'其他'之前添加<div style="clear:both"></div>。也许问题与清除和浮动在同一个元素中有关？说不上。

Chrome bug：css定位错误地调整容器大小

2 个答案: