【问题标题】:Floated div - fill available width浮动 div - 填充可用宽度
【发布时间】:2012-06-25 19:00:13
【问题描述】:

我必须让 div 浮动,一个在左边,另一个在右边。我想要做的(没有 js)是正确的 div 填充可用空间(宽度:100%)。问题是,左边的 div 有一个动态宽度,否则我可以简单地使用 margin-left。 我也试过 display: table-cell;但这不允许我使用边距,只能使用边框间距。

有什么建议吗?

【问题讨论】:

  • 左边div的宽度有多动态??
  • 我认为它会在 200 - 500px 之间
  • 你必须定义两边的宽度。
  • 这就是我不想做的。我希望左侧 div 的宽度是自动/未设置,右侧 div 填充可用空间(100%)。
  • 您可能想分享一些代码,以便我们可以准确地看到您的意思。另外,在第一句话中,您的意思是“两个div浮动”对吗?如果是这样,为了清楚起见,我建议更改它! ;)

标签: html css-float width


【解决方案1】:

您可能可以这样做,在 IE8 和更好的环境下工作,在 FF 中,在 Safari 中。您可以使用填充而不是边距,如下例所示:

<style>
    .c_0 {
        display:        table;
        width:          100%;
        border:         4px solid orange;
    }

    .c_1 {
        display:        table-cell;
        width:          20%;
        border:         1px solid red;
        padding-right:  20px;
    }

    .c_2 {
        display:        table-cell;
        border:         1px solid blue;
    }
</style>

<div class="c_0">
    <div class="c_1">
        has a width and padding instead of margin
    </div>
    <div class="c_2">
        has the rest
    </div>
</div>

编辑

这仅适用于第一行的 "%"。我看得太晚了,你想要像素。

【讨论】:

  • 问题:由于这个答案没有明确解决问题,我应该删除它吗?
  • 嘿,% 不是问题,我只希望左边的 div 宽度是自动/未设置,所以它是动态的。你不必删除它,即使它不能解决问题,也许它会在几年内帮助某人;)
  • 那列是从哪里知道的,也就是达到了最大宽度?
  • 正如 insertusernamehere 所说,它将自动将左侧设置为右侧单元格百分比标记的宽度。一旦您尝试将 px 放在那里,它将无法正常工作。
  • 基本上,如果您只是按百分比设置,那么他就是您的答案...
猜你喜欢
  • 1970-01-01
  • 2012-01-07
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-06-28
  • 2011-12-20
  • 2014-06-09
  • 1970-01-01
相关资源
最近更新 更多