Question

我正在进行三栏布局：

<div id="first"></div>
<div id="second"></div>
<div id="third"></div>

我想这样做，以便前两列具有固定宽度，第三列占据页面上的其余空间。只设置所有内容的百分比宽度是一个选项，但不是更可取。

我考虑的一个选项：

div#first {position: absolute; left: 0; top: 0; width: 150px;}
div#second {position: absolute; left: 150px; top: 0; width: 450px;}
div#third {margin-left: 600px}

过去我曾经使用过这样的东西，但收效甚微。也就是说，我发现如果#first或#second中有任何浮动元素，#third中已清除的元素也会清除#first和#second中的元素。虽然可以在没有清除的情况下工作，但如果可能的话，我希望避免这种限制。

我意识到我希望的行为确实可以通过以下布局产生：

<table style="width: 100%">
  <tr>
    <td width=150"><div id="first"></div></td>
    <td width=450"><div id="second"></div></td>
    <td><div id="third"></div></td>
  </tr>
</table>

虽然SEO在这个网站上不是问题，但作为根节点的表只是感觉不对。

Answer 1

听起来你正在寻找这样的东西：

<强> CSS

<style type="text/css">
  #first,#second {
    float: left;
  }

  #first {
    width: 150px;
    border: 1px solid red;
  }

  #second {
    width: 450px;
    border: 1px solid green;
  }

  #third {
    width: auto;
    overflow: auto;
    border: 1px solid blue;
  }
</style>

<强> HTML

<div id="first">Left</div>
<div id="second">Middle</div>
<div id="third">Right</div>

Answer 2

使用一点点javascript，它的完美/添加jquery首先用于选择器＆amp;等

<script type="text/javascript" src="js/jquery.js"></script>

和javascript part /

$(document).ready(function(){
    $('#third').css("width",$(window).width()-600)

    $(window).resize(function() {
        $('#third').css("width",$(window).width()-600)
    });
});

三列布局中的动态宽度第三列

2 个答案: