2

我在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>

​&lt;/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 中可见，这很奇怪。

我该如何解决？

谢谢。

4

2 回答 2

4

疯狂的技巧：添加float:left到绝对定位MyBox以获得额外的收缩包装功能：

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

.MyBox {
    position:absolute;
    float: left;

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

div 智能宽度

于 2012-06-28T16:58:45.790 回答
0

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

于 2012-06-28T16:57:37.080 回答