CSS div宽度不起作用

Posted 2023-03-06

【中文标题】CSS div宽度不起作用

【英文标题】：CSS div width not working

【发布时间】：2012-10-25 01:30:21

【问题描述】：

我有一个奇怪的问题。我的 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，错在

【问题讨论】：

把你的代码放在一个 jsFiddle 中，这样我们就可以测试了……你在其他浏览器中也检查过吗？

【参考方案1】：

display: inline-block;为我工作

例子：

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

【参考方案2】：

display: flex 在父元素上 也改变了width 和height 的工作方式。通过flex: 0 0 auto; 禁用收缩/增长，或改用min-width 和max-width。

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

【讨论】：

谢谢 :) flex: 0 0 auto 可能最适合这种情况

我只花了两个小时使用width 属性的变体来解决为什么我的弹性项目的宽度不是其父项的 30%。 flex: 0 0 30%; 终于成功了！

【参考方案3】：

使用clear: both; 属性。

.product_info clear: both;

【参考方案4】：

试试

显示：阻止

它应该可以工作

【讨论】：

如果你想让其他元素内联，你也可以display:inline-block。

能否请您解释一下您的解决方案？

【参考方案5】：

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

实际上你在你的child div's 中使用了floating 而没有在你的parent div 中使用clear。 所以我有cleared你的parent div到overflow:hidden;在父div和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;

【参考方案6】：

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

Live demo

像这样

.product_info
overflow:hidden;

=======

或选项 2

定义一个CSS

CSS

.clr
clear:both;

把这个div放在最后一行关闭 .product_info class

<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

【讨论】：

现场演示不工作！请链接一个 jsFilddle 而不是按点击付费的网站！！！