Question

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

我以为我会将描述放在一个表格的行中。我创建了3个div元素 - 一个containerdiv，一个icondiv和一个detailsdiv，并尝试将icondiv向左移动并将detailsdiv向右移动。我得到了icondiv on页面的左侧，但详细信息显示在icondiv下方并不是并排！

理想情况下，icondiv应该是containerdiv宽度的25-30％，而detailsdiv应该占据宽度的其余部分。我想知道是否有办法在没有提及像素宽度的情况下这样做。

如果我的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％等问题？我需要硬编码像素宽度等吗？溢出属性对我来说是新的..

Answer 1

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

另外，我建议您使用div来表示itemdetailstable的一致性。

Answer 2

请参阅： 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

overflow: hidden

div.itemdetailscontainer将以我认为您认为不存在的clear: float的方式包含浮点数。看看valid values of clear。如果您迫切希望使用clear: both来清除浮动内容，请按以下步骤进行操作：http://jsfiddle.net/Uys4s/1/ - 但overflow: hidden更容易。

Answer 3

没有任何名为float：clear它应该是：

float : none;

或者如果你试图清除浮动它应该是：

clear:both

Answer 4

float: clear不存在！我想你想要这个：clear: left/right/both

我怎么能左右浮动div？

4 个答案: