代码之家 › 专栏 › 技术社区 › Steven

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

css html

Steven · 技术社区 · 14 年前

我正在设计一个三列布局:

<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 也会清除那些 第一次 和 第二秒 . 在没有清理的情况下工作是可能的,如果可能的话,我想避免一个限制。

我意识到我所期望的行为确实可以通过以下布局产生:

<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在这个站点上不是一个问题,但是作为根节点的一个表感觉是错误的。

2 回复 | 直到 14 年前

Gert Grenander Keiron Lowe 14 年前

听起来你在找这样的东西:

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>

spielersun 14 年前

使用一点javascript,它的完美/添加jquery首先用于选择器等。

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

以及javascript部分/

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

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

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前