我遇到了一个奇怪的问题。我的一个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
,什么是错误的
6条答案
按热度按时间icnyk63a1#
父元素**上的
display: flex
**也会更改width
和height
的工作方式。禁用按flex: 0 0 auto;
收缩/增长,或改用min-width
和max-width
。width和height在此上下文中基本上失去了原来的含义,将充当
flex-basis
,请参见geddski: The Difference Between Width and Flex Basis2ekbmq322#
试试看
显示:块
应该可以
azpvetkf3#
display: inline-block;
对我有用示例:
n8ghc7c14#
我希望你看起来像这样:-http://tinkerbin.com/MU2CUpre
实际上你已经在你的
child div's
中使用了floating
,而没有在你的parent div
中使用clear
。所以我在父div中使用了cleared
,你的parent div
到overflow:hidden;
,而cleared
这个子div.product_details
也工作得很好。yi0zb3m45#
使用
clear: both;
属性。pepwfjgg6#
现在定义你的类
.product_into
overflow:hidden;
一个月一次
像这样
=====
定义一个css
将此
div
放在最后一行关闭.product_info
类Live demo option two