37

我有一个奇怪的问题。我的 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，出了什么问题在此处输入图像描述

4

6 回答 6

62

display: flex 在父元素上也改变了如何width和height工作。禁用收缩/增长flex: 0 0 auto;，或使用min-widthandmax-width代替。

width和height基本失去了原意，会充当a flex-basis，见geddski: The Difference Between Width and Flex Basis

于 2018-06-27T18:33:09.860 回答
39

尝试

显示：块

它应该工作

于 2014-01-30T09:39:15.667 回答
3

display: inline-block;为我工作

例子：

label {
    min-width: 90px;
    display: inline-block;
}
于 2021-05-06T05:43:04.450 回答
0

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

实际上，您已经floating在您的child div's和没有使用过clear您的parent div. 所以我在父 divcleared中有你的parent div通过，而这个子 div也可以正常工作......overflow:hidden;cleared.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;
}
于 2012-11-05T08:22:28.387 回答
0

使用该clear: both;物业。

.product_info {clear: both;}
于 2016-03-18T14:06:39.600 回答
-1

嗨，现在定义你的班级.product_into overflow:hidden;

现场演示

像这样

.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>

现场演示选项二

于 2012-11-05T08:20:32.480 回答