ширина контейнера намного больше, чем содержимое

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

Вы должны определить ширину для элемент, которому yo и есть установить 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 2

попробовать это:

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

при изменении высоты от content-spot это ширина по-прежнему фиксированной и нужно, чтобы изменить размер тоже.

DEMO

---

вы можете использовать этот код тоже:

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

DEMO

Answer 3

если вы сделаете

.hot_spot-container {display:inline-block} 

вместо этого Havi Позиция ng: абсолютная она делает то, что вы хотите. если вы хотите позицию абсолютной вы должны дать ему ширину

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; 
}