CSS div宽度不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13228277/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS div width not working
提问by Nitish
I have a strange problem.One of my div's width is not working. My CSS is like
我有一个奇怪的问题。我的一个 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;
}
And My HTML file is
我的 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>
But as you can see in the attached image my divproduct_info's width is not 850px, Whats wrong
但是正如你在附加图片中看到的那样，我divproduct_info的宽度不是850px，怎么了
回答by Vishal
Try
尝试
display:block
显示：块
It should work
它应该工作
回答by Tamas Hegedus
display: flexon the parent elementalso changes how widthand heightwork. You can use min-widthand/or max-widthinstead, or disable shrinking/growing by flex: 0 0 auto;
display: flex在父元素上也会改变方式width和height工作。您可以使用min-width和/或max-width代替，或禁用收缩/增长flex: 0 0 auto;
Width and height basically lose the original meaning and will act as a flex-basis, see geddski: The Difference Between Width and Flex Basis
width 和 height 基本失去了原来的意思，会充当 a flex-basis，参见geddski: The Difference between Width and Flex Basis
回答by Rajeesh
Use the clear: both;property.
使用clear: both;物业。
.product_info {clear: both;}
回答by Shailender Arora
i hope you are looking like this :- http://tinkerbin.com/MU2CUpre
我希望你看起来像这样：- http://tinkerbin.com/MU2CUpre
Actually you have used floatingin your child div'sand didnt clearyour parent div.
So i have clearedyour parent divthrough overflow:hidden;in parent divand clearedthis child div .product_detailsalso its working fine......
实际上你已经floating在你的child div's和没有clear你的parent div. 所以我在父 div 中有cleared你的parent div通过，这个子 div也工作正常......overflow:hidden;cleared.product_details
CSS
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;
}
回答by Rohit Azad
Hi now define your class .product_intooverflow:hidden;
嗨，现在定义你的班级 .product_intooverflow:hidden;
as like this
像这样
.product_info{
overflow:hidden;
}
=======
========
or option 2
或选项 2
define one css
定义一个css
Css
css
.clr{
clear:both;
}
Put the this divin last line closingthe .product_infoclass
将这个在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>
