-1

我正在尝试创建 3 个作为列执行的 div。

左边应该粘在左边并且是 175px。右边应该坚持右边并且是 175px。中间应该是剩余宽度的 100%。(100%-(175px-175px))

这段代码不起作用，我不知道为什么。我觉得这一切都是正确的，但我无法弄清楚。

我试过javascript调整大小，你怎么看？

  <script type="text/javascript">
$(function() {
   var newwidth = $(window).width() - 350;
   $("main_middle").css({width: newwidth+'px'});
});

$(window).resize(function() {
   var newwidth = $(window).width() - 350;
   $("main_middle").css({width: newwidth+'px'});
});
</script>

<div style="width:100%;height:100%;position:relative;margin:auto;">

<div style="position:fixed;width:175px;height:100%;margin-left:0;background-color:#222;">
</div>

<div id="main_middle" name="main_middle" style="float:left;position:absolute;height:100%;margin-left:175px;margin-top:38px;background-color:white;border-left:1px solid #A9A9A9;top:0px;left:0px;margin-right:200px;">
</div>


<div style="float:right;right:0px;position:relative;border-left:1px solid #A9A9A9;height:100%;background-color:white;margin-top:38px;width:200px;">
</div>

</div>

谢谢！

4

2 回答 2

2

我不知道它是否是错字，但您在 JQuery 调用中缺少 #

$("main_middle")

应该

$("#main_middle")
于 2012-09-20T08:06:31.737 回答
1

检查此代码并将其与您所拥有的进行比较

<body>
<div id="header">
    <h1>Header</h1>
</div>
<div id="left">
    Port side text...
</div>
<div id="right">
    Starboard side text...
</div>
<div id="middle">
    Middle column text...
</div>
<div id="footer">
    Footer text...
</div>
</body>

这是CSS代码：

body {
    margin: 0px;
    padding: 0px;
}
div#header {
    clear: both;
    height: 50px;
    background-color: aqua;
    padding: 1px;
}
div#left {
    float: left;
    width: 150px;
    background-color: red;
}
div#right {
    float: right;
    width: 150px;
    background-color: green;
}
div#middle {
    padding: 0px 160px 5px 160px;
    margin: 0px;
    background-color: silver;
}
div#footer {
    clear: both;
    background-color: yellow;
}

我认为您不需要为此使用javascript。

于 2012-09-20T08:09:00.347 回答