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

父元素上的

display: flex

会更改 width

 和 

height

 属性对子元素的作用。通过 

flex: 0 0 auto;

 禁用子项的伸缩收缩/增长，或使用 

min-width

 和 

max-width

 代替。

宽度和高度在这种情况下基本上失去了原来的含义，将充当

flex-basis

，请参阅 

geddski：宽度和 Flex 基础之间的差异

.box {
  margin: 2px;
  border: 1px solid black;
  padding: 3px;
}
.box.gray {
  background: lightgray;
}
.box.container {
  display: flex;
  flex-flow: row;
}

<div class="box" style="
  width: 300px;
  font-size: 80%;
">
  <div>
      width: 300px;
  </div>
  <div class="box container">
    <div class="box gray" style="width: 200px;">
      width: 200px;
    </div>
    <div class="box gray" style="width: 200px;">
      width: 200px;
    </div>
  </div>

  <div class="box container">
    <div class="box gray" style="
      width: 200px;
      flex: 0 0 auto;
    ">
      width: 200px;<br>
      flex: 0 0 auto;
    </div>
    <div class="box gray" style="width: 200px;">
      width: 200px;
    </div>
  </div>

</div>

Answer 2

尝试

显示：块

应该有效

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

。
所以我有 

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;
}

Answer 5

使用

clear: both;

 属性。

.product_info {clear: both;}

Answer 6

嗨，现在定义你的班级

.product_into

overflow:hidden;

现场演示

就像这样

.product_info{
overflow:hidden;
}

========

或选项2

定义一个CSS

CSS

.clr{
clear:both;
}

将这个

div

 放在最后一行 

close .product_infoclass

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

现场演示选项二