宽度不改变div

Question

奇怪的问题在这里我看不出问题了！我使用类sale_container设置整个元素的宽度。但它的宽度根本没有变化！

请参阅JSFiddle Demo

CSS：

/*Sale styles*/
.add_sales input {
    background:none;
    border:none;
    color:#FFF;
}
.sales_toolbar input {
    width:30px;
}
.sale_container {
    width:500px;
    border:2px solid #FFF;
}
.sale_image {
    height:200px;
    width:200px;
    background-size:cover;
    border-radius:10px;
}
.sale_image_container {
    border:solid #000 1px;
    float:left;
    border-radius:10px;
    background-color:#353535;
}
.sale_image_container p {
    margin:10px;
}
.sales_toolbar {
    float:right;
}

HTML：

<form class="add_sales" name="add_sales" action="php/process_sales.php" method="post">
    <div class="sale_container">
        <div class="sale_image_container">
            <div style="background-image:url(data/images/20140121/0/image8.jpg)" class="sale_image"></div>
            <p>KR</p>
        </div>
        <div class="sales_toolbar">
            <input type="text" readonly value="KRR" id="50_selected" /> <!-- Selected -->
        </div>
    </div>
</form>

似乎正在使用JSFiddle，但是当我在Chrome中预览它时，它看起来像这样：

Answer 1

备用CSS源可能包含其他样式。您是否尝试使用Inspect Element查看div，并查看是否有任何意外的样式被应用？如果您右键单击任何元素，Chrome本身就具有内置功能。

很高兴能提供帮助。

Answer 2

将position_container的绝对位置设置为更改宽度。

.sale_container{
   width: 300px;
   position: absolute;
   border: 2px solid #E97676;
}

使用firebug（http://getfirebug.com/）检查html元素和css属性。