Question

<div style="width:100%;border:1px solid green">

    <div style="float:left">
        <img src="images/logo.gif" />
    </div>
    <div style="float:left;border:1px solid black;">
        lol
    </div>
    <div style="clear:both">
    </div>

</div>

lol在一个很小的盒子里，我需要它来填满容器中的剩余空间！

Answer 1

因为它是漂浮的，你需要给它一个宽度。

Answer 2

这是有效的（至少在Safari中），但我不知道它是否适合你，因为它修改了div标签的位置：

<div style="width:100%;border:1px solid green">
  <div style="float:left;border:1px solid black; width: 100%;">
    <div style="float:left">
      <img src="..." />
    </div>
    lol
  </div>
  <div style="clear:both">
  </div>
</div>

Answer 3

很遗憾，CSS中没有可能说

width: 100% - 100px;

但你可以做的是：

<div>
    <div style="float:left;width:100px;">
        <img ... />
    </div>
    <div style="margin-left:100px;">
        lol rofl xd whatever
    </div>
</div>

这将为您提供左侧的图像，其列固定为100px，右侧为灵活列。你只是不能使用灵活的图像列;（

Answer 4

如果您只需要一个div来共享相同的空间，请查看这是否适合您：http://jsfiddle.net/vVQK2/

您只需将徽标浮动到左侧，不要对另一个做任何事情。

#outer {
    width: 500px;
    overflow: hidden;
}

#logo {
    float: left;
    width: 100px;
    height: 100px;
    margin-right: 20px;
}

Answer 5

最佳解决方案是不可能的，但它可行，使用表格：

<table width="100%">
  <tr>
    <td>
      <img>
    </td>
    <td>
      More
    </td>
  </tr>
</table>

简单的CSS问题，100％宽度

5 个答案: