-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 に答える