Css 我怎样才能左右浮动div？

我需要在页面左侧显示一个产品图标（尺寸通常为300x400px），在右侧显示其详细信息

我想我应该把描述放在一个表的行中。我创建了3个div元素——containerdiv、icondiv和detailsdiv，并尝试将icondiv向左浮动，detailsdiv向右浮动。我将icondiv放在页面的左侧，但detailsdiv显示在icondiv下面，而不是并排显示

理想情况下，icondiv应该是containerdiv宽度的25-30%，detailsdiv应该占据剩余的宽度。我想知道是否有一种方法可以做到这一点，而不用提及像素宽度

如果我的css有问题，请纠正我

谢谢

标记

---

我试过这个

div.itemdetailscontainer{
    width:100%; 
}
div.itemicondiv{
    float:left;
    width:25%;  
}
div.itemdetailsdiv{
    float:right;
    width:75%;  
}

这就得到了效果

谢谢大家的回复..是使用 宽度：25%等有问题吗？我是否需要硬编码宽度（像素等）？

---

溢出属性对我来说是新的。

没有所谓的浮点：清除它应该是：

float : none;

clear:both

或者，如果您试图清除浮动，则应：

float : none;

clear:both

---

float:clear

不存在！

---

我想您需要这样：

清除：左/右/两个

确保您的容器（itemdetailscontainer）有足够的宽度将它们并排放置。用Firebug或其他工具检查并检查宽度

此外，我建议您对itemdetailstable使用div以保持一致性。

请参阅：

• 宽度：30%

  处理此问题：“理想情况下，icondiv的宽度应为集装箱IV的25-30%。”

• overflow:hidden

  on

  div.itemtailsdiv

  处理此问题：“detailsdiv应占据剩余宽度”

• div.itemsdetails容器上的
  overflow:hidden
  将以我认为您想象不存在的
  clear:float
  的方式包含浮动。请看下面的图片。如果您非常想使用
  clear:both
  来清除浮动，您可以这样做：-但是
  overflow:hidden
  更容易

div.itemdetailscontainer{
    overflow: hidden;
    background: #eee
}
div.itemicondiv{
    float: left;
    width: 30%;
    background: #ccc
}
div.itemdetailsdiv{
    overflow: hidden;
    background: #aaa
}