=======

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，错误的是 enter image description here

Answer 1

尝试

显示：阻止

应该有效

Answer 2

父元素上的

display: flex也会更改width和height的工作方式。

他们基本上失去了最初的含义，将充当flex-basis，请参见geddski: The Difference Between Width and Flex Basis

Answer 3

display: inline-block; 为我工作

示例：

label {
    min-width: 90px;
    display: inline-block;
}

Answer 4

我希望你看起来像这样： - http://tinkerbin.com/MU2CUpre

实际上，您在floating中使用了child div's而clear没有使用parent div。所以我在{strong>父div 中cleared parent div到overflow:hidden;，{child} cleared这个子div .product_details也工作正常。 ....

<强> CSS

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

.product_details
{
    float:left;
    width:400px;
    margin-left:25px;
    font-size:14px;
    font-family:"Helvetica";
    background:#d71414;
    clear:both;
}

Answer 5

使用clear: both;属性。

.product_info {clear: both;}

Answer 6

您好现在定义您的班级.product_into overflow:hidden;

的 Live demo 的

就像这样

.product_info{ overflow:hidden; }

=======

或选项2

定义一个css

<强>的CSS

.clr{ clear:both; }

将此div放在最后一行关闭 .product_info 类

<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 class="clr"></div> </div>

的 Live demo option two 的

CSS div宽度不起作用

6 个答案:

=======