CSS div宽度不起作用

Question

我有一个奇怪的问题.我的div宽度之一不起作用.我的CSS就像

.product_info
{
    margin-top:10px;
    background:#444;
    width:850px;

}
.product_image
{
    width:350px;
    text-align:center;
    float:left;
    padding:8px;
    border:1px solid #e9e9e9;
    background:#fff;
}
.product_details
{
    float:left;
    width:400px;
    margin-left:25px;
    font-size:14px;
    font-family:"Helvetica";
    background:#d71414;
}

我的HTML文件是

<div class="product_info">
                <div class="product_image">

                </div>

                <div class="product_details">
                    <div class="selection">
                    <form action="{$path_site}{$indeex_file}" method="post">
                    Size
                    {foreach name = feach item = k from = $product_size}
                        <input type="radio" name="size" value="{$k.product_size}" />{$k.product_size}
                    {/foreach}


                    </div>

                    <div class="selection">
                    No. of pieces <input type="text" name="quantity">

                    </div>
                    <div class="prc">
                        <span class="WebRupee">Rs.</span> {$product_info->product_cost}.00
                            </div>

                    <div class="buy_btn"><input type="submit" value="BUY" /></div>
                    </form>
                </div>
            </div>

但是你可以在附图中看到我div product_info的宽度不是850px,错了

Answer 1

尝试

显示:块

它应该工作

Answer 2

display: flex 父元素也改变如何width和height工作。您可以使用min-width和/或max-width代替，或通过以下方式禁用缩小/增长flex: 0 0 auto;

它们基本上失去了本来的含义，并且会充当flex-basis，请参阅geddski：宽度和弹性基础之间的差异