容器寬度比內容大得多

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;的元素定義寬度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}

而不是擁有position：absolute，它可以做您想要的。 如果您想要絕對位置，則需要給定寬度

Answer 4

試試這個

我刪除了您的JavaScript並進行了此更改

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

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