使用動態寬度創建不均勻的列

-1

左邊應該粘在左邊，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>

謝謝！

來源

2012-09-20 Rusty Schmidt

什麼「不工作」？你不需要JavaScript來做到這一點，CSS是綽綽有餘。 http://www.dynamicdrive.com/style/layouts/category/C10/ –

我不知道，如果它的一個錯字，但你錯過了＃你JQuery的通話

$("main_middle")

應該

$("#main_middle")

來源

2012-09-20 08:06:31 Qpirate

不可思議的發現哈哈！謝謝！ –

檢查這個代碼，並與你有什麼

比較

<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-20 08:09:00 Frankline

使用動態寬度創建不均勻的列

回答

相關問題