css - 我怎样才能左右 float div？

我需要在页面左侧显示一个带有产品图标（尺寸通常为300x400像素）的页面，并在右侧显示其详细信息。

我以为我会将描述放在表格的行中。我创建了3个div元素-一个containerdiv，一个icondiv和一个detailsdiv，并尝试将icondiv浮动到左侧，并将detailsdiv浮动到右侧。我在该图标的左侧页，但detaildiv不能并排显示在icondiv下方！

理想情况下，icondiv的宽度应为containerdiv的25％至30％，而detaildiv应该占据其余宽度。我​​想知道是否有一种方法可以做到不提及像素宽度。

如果我的CSS出问题了，请纠正我

谢谢

标记

<div class ="itemdetailscontainer">
    <div class="itemicondiv">
        <img border="0" src="${item.isbn }.png"  alt="${item.isbn }.png" />
    </div>
    <div class="itemdetailsdiv">
        <table id="itemdetailstable" width="100%">
        <tr>
            <td>

            ${item.name }

            </td>
         </tr>

          <tr>
            <td>by</td>
          </tr>
          <tr>
            <td>${item.maker.name }</td>
          </tr>

          <tr>
            <td>
              <p>Description:</p>
              <p>${item.description}</p>
            </td>
          </tr>
        </table>
    </div>
</div>

CSS是

div.itemdetailscontainer{
    float:clear;
}
div.itemicondiv{
    float:left;
}
div.itemdetailsdiv{
    float:right;
}

我试过了

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

这样就可以了。

感谢大家的回应。
宽度：25％等有问题吗？我需要对像素宽度等进行硬编码吗？
溢出属性对我来说是新的。

最佳答案

参见：http://jsfiddle.net/Uys4s/

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

width: 30%处理此问题：“理想情况下，icondiv的宽度应为containerdiv的25-30％”
overflow: hidden上的div.itemdetailsdiv处理此问题：“ detailsdiv应该占据其余宽度”。
我认为您想象不存在的overflow: hidden将会以div.itemdetailscontainer上的clear: float包含浮点数。看一下valid values of clear。如果您非常想使用clear: both清除浮点数，请按以下步骤操作：http://jsfiddle.net/Uys4s/1/-但是overflow: hidden更容易。

关于css - 我怎样才能左右 float div？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/6690396/