Question

我有一堆内容漂浮在一个容器中，我希望容器能够拥抱内容，但由于某种原因它比内容宽得多，我不明白为什么。我把它设置在一个小提琴中http://jsfiddle.net/vG8NY/6/红色和蓝色的边框容器应该拥抱圆圈的右边缘。

代码非常简单，如下所示：

HTML：

<div class="hot_spot-container">
    <div class="content-spot">
        <img class="hotspot-cir" src="http://www.klossal.com/sixred/discovery/images/hotspot-left.png" />
        <div class="hotspot-content"></div>
        <img class="hotspot-cir" src="http://www.klossal.com/sixred/discovery/images/hotspot-right.png" />
        <br class="clear-fix" />
    </div>
</div>

CSS：

.hot_spot-container {border:1px solid blue;
    position:absolute;
}
.content-spot {
     border:1px solid red;
     display:inline-block;
}


.hotspot-cir {
    float:left;
    height:100%;
    width:auto;
}
.hotspot-content {
    float:left;
    background:#ec6e47;
}
.clear-fix {
    clear:both;
}

JS

$(".content-spot").css({
    height:$(window).height() * ".2"    
});

Answer 1

试试这个：

$(".content-spot").css({
    height:$(window).height() * ".2",
    width:$(window).height() * ".2"
});

当您更改content-spot的高度时，它的宽度仍然固定，并且需要调整大小。

DEMO

您也可以使用此代码：

$(".hotspot-cir").css({
    height:$(window).height() * ".2"    
});

DEMO

Answer 2

您必须为您设置position: absolute;的元素定义宽度，因此您应该使用以下内容：

.hot_spot-container {border:1px solid blue;
    position:absolute;
    /* any width you want or if you don't know the width then define auto.*/
    width: 45px; 
}

Answer 3

如果你做

.hot_spot-container {display:inline-block}

而不是它有位置：绝对它做你想要的。如果你想要绝对位置，你需要给它一个宽度

Answer 4

尝试this

我删除了您的javascript并进行了此更改

.content-spot {
    border:1px solid red;
    display:inline-block;
    width: auto;
}

.hot_spot-container {
    border:1px solid blue;
    position:absolute;
    display: inline-block;
}

容器宽度比内容大得多

4 个答案: