Question

这就是困境。

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

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

发生的事情是，list-two最终清除list-one，而不是向右浮动。有人可以帮忙吗？这就是我所拥有的：

#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％，因此在不同宽度下的行为会有所不同，但这种方式有效。

<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，我需要一个以300px浮动的twitter feed块，然后是左边的流体内容块。我一直希望保持移动友好，所以希望在浏览窗口缩小时将块包装到下一行。

这对我有用：

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

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

2 个答案: