浮动 两个并排 一个流体 一个固定

Question

这就是困境。

<div id="lists-container>
<ul id="list-one"></ul>
<ul id="list-two"></ul>
</div>

我需要列表一中的内容来扩展父 div（列表容器）的 100％，如果列表二有内容，我希望两个列表都是 50％ 宽度 - 并排浮动。

发生的情况是列表二最终清除列表一，而不是向右浮动。有人可以帮忙吗？ 这就是我所拥有的：

#list-container{width:600px}
ul#list-one{display:inline; float:left}
ul#list-two{display:inline; float:right; width:50%}

Answer 1

使用display:table。还放入一些隐藏的 Internet Explorer 标记。其中一些是一起运行的，因为如果您没有在内容后面关闭标签，IE 会添加空格。

<div id="lists-container" style="display:table; width:100%">
  <!--[if lt IE 8]>
  <table border=0 cellspacing=0 cellpadding=0>
    <tbody>
  <![endif]-->
  <div style="display:table-row">
    <!--[if lt IE 8]>
      <tr>
        <td width="50%">
    <![endif]-->
    <div style="display:table-cell; width:50%">
      <ul id="list-one"></ul>
    </div><!--[if lt IE 8]></td><td width="50%"><![endif]-->
    <div style="display:table-cell; width:50%">
      <ul id="list-two"></ul>
    </div><!--if lt IE 8]></td></tr><!endif]-->
  </div><!--if lt IE 8]></tbody></table><!endif]-->
</div>

这为您提供了良好的、可预测的、类似表格的行为，但仍然使用语义标记。它适用于 IE 6+ 和 EOMB。

注意：我前段时间在网上读到过这一点。我认为这是一个博客。如果有人能找到并注明来源，我将不胜感激。我找不到它！

如果您不想使用 display:table，这里有一些代码可以让您接近。应用的宽度是父容器的 50% + border + padding + margin，所以这在不同的宽度下会有不同的表现，但这种方法是有效的。

<style type="text/css">
  #list-container {
    width:600px
  }
  ul#list-one {
    border:1px solid red;
    display:inline;
    float:left;
    width:49%;
    margin:0;
    padding:0;
  }
  ul#list-two {
    width:49%;
    padding:0;
    margin:0;
    border:1px solid blue;
    display:inline;
    float:left;
  }
</style>

<div id="lists-container">
  <ul id="list-one">
    <li>item 1</li>
  </ul>
  <ul id="list-two">
    <li>item 2</li>
  </ul>
</div>

Answer 2

我一直在开发一个 div，我需要一个以 300 像素浮动的 twitter feed 块，然后在左侧浮动一个流体内容块。我一直想保持移动友好，因此希望当浏览窗口缩小时这些块能够换行到下一行。

这对我有用：

<div id="tw" style="display:inline; float:right; width:300px;">Tweets</div>
<div id="content" style="display:inline-block;">